Wie kann ich ein Array von Objekten basierend auf einem Options-Array formatieren?

Question

Ich habe ein Array von Objekten wie folgt aus:

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

und ein Array für die Optionen, zum Beispiel:

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

Mein Ziel ist es, die Objekte in eine Liste zu schreiben, zeigt nur die Eigenschaften im options Array vorhanden. So weit mein Code:

Es ist eindeutig redundant. Gibt es eine klügere Möglichkeit, die gleiche Leistung zu erzielen? (Ich benutze Vanille JS.)

Answer 1

Legen Sie Ihre Vorlagen für jede Eigenschaft in ein Objekt, dann Optionen iterieren entsprechende Vorlage nur für jede Option hinzufügen:

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 2

Sie könnten etwas tun wie: 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 3

Ja 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 4

Ihre Optionen sehr unterschiedlich Also wird es eine Wiederholung geben, egal was du tust. Ich weiß nicht, wie viel das alles einfacher macht, aber ich schätze, Sie könnten versuchen, ein Array für Ihre Optionen und die verschiedenen Vorlagen, die Sie für sie haben, und mögliche Filter zu erstellen. Filtern Sie zuerst die Optionen, die nicht in Ihrem Optionsfeld enthalten sind. Als nächstes filtern Sie mit Ihrem Vorlagenfilter aus, falls vorhanden. Fügen Sie das Element schließlich mithilfe der Vorlage hinzu.

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