Как добавить блок кода HTML несколько раз с использованием JavaScript

Question

У меня есть кодовый блок HTML (заголовок, некоторые теги li, за которым следует ссылка), который должен отображаться несколько раз в качестве результатов поиска, в которых каждый блок является одним результатом.

Я получаю его как JSON в js. Как я могу перебрать объект JSON и создать, добавить несколько результатов поиска на HTML-страницу, используя простой JavaScript в наилучшем виде?

Примечание: Я использовал, чтобы сделать это с помощью директивы в Angular.js

Answer 1

Я рекомендую вернуться к AngularJS, Knockout или другой платформе MV *, чтобы выполнить это, но если вы должны сделать это в простом JavaScript, здесь приведен базовый подход.

var data = [ 
 
    { 
 
    title: "First result", 
 
    information: [ 
 
     "Jerry", 
 
     "George", 
 
     "Elaine", 
 
     "Kramer" 
 
    ], 
 
    link: "http://example.com" 
 
    }, 
 
    { 
 
    title: "Second result", 
 
    information: [ 
 
     "A", 
 
     "B", 
 
     "C" 
 
    ], 
 
    link: "http://example.com" 
 
    }, 
 
    { 
 
    title: "Third result", 
 
    information: [ 
 
     "D", 
 
     "E", 
 
     "F" 
 
    ], 
 
    link: "http://example.com" 
 
    } 
 
]; 
 

 
var i = 0, j = 0; 
 

 
for (i = 0; i < data.length; i++) { 
 
    if (data[i]) { 
 
    var container = document.createElement('div'); 
 
    var title = document.createElement('h2'); 
 
    var items = document.createElement('ul'); 
 
    var link = document.createElement('a'); 
 
    
 
    title.innerHTML = data[i].title || ""; 
 
    
 
    if (data[i].information) { 
 
     for (j = 0; j < data[i].information.length; j++) { 
 
     var item = document.createElement('li'); 
 
     
 
     item.innerHTML = data[i].information[j] || ""; 
 
     items.appendChild(item); 
 
     } 
 
    } 
 
    
 
    link.href = data[i].link || ""; 
 
    link.innerHTML = link.href; 
 
    
 
    container.appendChild(title); 
 
    container.appendChild(items); 
 
    container.appendChild(link); 
 
    
 
    document.body.appendChild(container); 
 
    document.body.appendChild(document.createElement('hr')); 
 
    } 
 
}

Answer 2

Вы можете использовать Knockout. Нокаут обеспечивает свойство привязки данных для HTML-тегов и имеет цикл foreach. Таким образом, Knockout будет проходить через объект JSON и создавать, добавлять несколько результатов поиска на html-страницу.