如何基於選項數組格式化對象數組？

Question

我有一個這樣的對象數組：

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

以及選項的數組，例如：

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

我的目標是將對象寫入列表，僅顯示options數組中存在的屬性。 到目前為止，我的代碼：

objects.forEach(function(obj) {

  var li = document.createElement('li');
  li.innerHTML = `<a href=${obj.link}>${obj.title}</a>`;

  if (options.includes('author')) {
    li.innerHTML += `<span class="author">${obj.author}</span>`;
  }

  if (options.includes('date')) {
    li.innerHTML += `<time datetime=${obj.date.toISOString()} class="date">${obj.date.toLocaleDateString()}</time>`;
  }

  if (options.includes('thumbnail_url') && obj.thumbnail_url !== "") {
    li.innerHTML += `<img src=${obj.thumbnail_url} class="thumbnail">`;
  }

  if (options.includes('comments')) {
    li.innerHTML += `<span class="comments">${obj.comments}</span>`;
  }

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

顯然是多余的。 有沒有更聰明的方法來實現相同的輸出？ （我使用香草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

是的，應該：

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);
});