Question

我有一个像这样的对象数组：

array_walk($array,function(&$value,$key){
    $value=(array) $value;
});
array_walk_recursive($array, function($value,$key){
    print_r($value);
    print_r($key);
});

和选项的数组，例如：

var objects = [
  {
    'title': 'Title',
    'link': '...',
    'author': 'Author',
    'date': '...',
    'thumbnail_url': '...',
    'comments': 2
  },
  .
  .
  .
];

我的目标是将对象写入列表，仅显示var options = ['author', 'thumbnail_url']数组中存在的属性。到目前为止我的代码：

options

这显然是多余的。是否有更智能的方法来实现相同的输出？（我使用香草JS。）

Answer 1

你可以这样做： var list = document.getElementById（'myList'）;

var templates = {
    'author': `<span class="author">${obj.author}</span>`,
    'date': `<time datetime=${obj.date.toISOString()} class="date">${obj.date.toLocaleDateString()}</time>`,
    'thumbnail_url': `<img src=${obj.thumbnail_url} class="thumbnail">`,
    'comments': `<span class="comments">${obj.comments}</span>`
}

objects.forEach( obj => {
    let html = '<a>...</a>';
    for (opt in templates) {
        if (typeof(obj[opt])!=='undefined') {
           html += templates[opt];
        }
    });
    let li = document.createElement('li');
    li.innerHTML = html;
    list.appendChild(li);
});

// create element and assign html to innerHTML

Answer 2

是的shure：

objects.forEach(function(obj) {
 var li = document.createElement('li');
  ["title","author","thumbnail_url"].forEach(function(key){
    if(obj[key]){
    li.innerHTML += `<a href="${obj[key]}">${obj[key]}</a>`;
    }
  });
 document.getElementById('list').appendChild(li);
});

Answer 3

将每个属性的模板放入对象中，然后迭代选项，仅为每个选项添加适当的模板：

var templates = {
  'author': `<span class="author">${obj.author}</span>`,
  'date': `<time datetime=${obj.date.toISOString()} class="date">${obj.date.toLocaleDateString()}</time>`,
  'thumbnail_url': `<img src=${obj.thumbnail_url} class="thumbnail">`,
  'comments': `<span class="comments">${obj.comments}</span>`
}


objects.forEach(function(obj) {
  var li = document.createElement('li');
  li.innerHTML = `<a href=${obj.link}>${obj.title}</a>`;
  // loop over options adding template from template object
  options.forEach(function(opt) {
    if (obj[opt]) {
      li.innerHTML += templates[opt];
    }
  });

  document.getElementById('list').appendChild(li);
});

Answer 4

你的选择变化很大，所以无论你做什么，都会有一些重复。我不知道这会让它变得多么容易，但我猜你可以尝试为你的选项和你拥有的各种模板以及可能的过滤器创建一个数组。首先筛选出选项数组中不包含的选项。接下来，使用模板过滤器过滤掉（如果有）。最后，使用模板添加元素。

var possibleOptions = [
  {
    name: 'author',
    template: autor => `<span class="author">${author}</span>`,
  },
  {
    name: 'date',
    template: date => `<time datetime=${date.toISOString()} class="date">${date.toLocaleDateString()}</time>`,
  },
  {
    name: 'thumbnail_url',
    template: thumbnail_url => `<img src=${thumbnail_url} class="thumbnail">`,
    filter: input => input !== "",
  },
  {
    name: 'comments',
    template: comments => `<span class="comments">${comments}</span>`,
  },
];

var options = ['author', 'thumbnail_url'];

objects.forEach(function(obj){
  var li = document.createElement('li');
  li.innerHTML = `<a href=${obj.link}>${obj.title}</a>`;
  possibleOptions
  .filter(option => options.includes(option.name))
  .filter(option => option.filter ? option.filter(obj[name]) : true)
  .forEach(option => {
    li.innerHTML += option.template(obj[name]);
  });
  document.getElementById('list').appendChild(li);
});

如何基于选项数组格式化对象数组？

4 个答案: