Javascript/JQuery Dynamic UL Troubles

Question

Я работаю над проблемой добавления динамических UL и LI на веб-страницу через javascript и jQuery и в тупик.

У меня почти есть решение, но оно не добавляет стиль и не помещает каждый UL на отдельной строке. У меня такое ощущение, что те метки, которые я создаю, не закрываются, но я не уверен.

Моя конечная цель состоит в том, чтобы каждая строка JSON была отдельной UL и показывалась в отдельной строке с именем + фамилия + номер телефона в качестве элементов списка каждого UL и отображалась как таблица (без использования Таблица). Нет встроенных стилей и без разметки HTML, кроме того, что динамически добавляется через Javascript.

Мне был дан следующий код в качестве отправной точки, но мое решение, безусловно, немного отклонилось от курса. Я искал часы, и до сих пор вы можете увидеть мою лучшую попытку на ссылке jsfiddle ниже. Любая помощь приветствуется.

function showContacts(data){ 
    var markup = ""; 
    $("body").html(markup); 
}; 

$(document).ready(function myFunction() { 
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]'; 
    showContacts(jsonText); 
}); 

https://jsfiddle.net/bkweLctq/embedded/result/

Answer 1

Вы просто пропустили element творение. Ваш odd & even стиль класса также необходимо изменить.

Обновленные JS

function showContacts(data) { 
    var markup = ""; 
    var jo = $.parseJSON(data); 
    console.log(jo); 

var $body = $('body'); 

var _html = ''; 

    for(var i = 0; i<jo.length; i++){ 
     if((i+1)%2 == 0){ 
      _html += '<ul class="even">'; 
     }else { 
      _html += '<ul class="odd">'; 
     } 

     var _index = 0; 
     $.each(jo[i], function(k,n) { 
      if((_index+1)%2 == 0){ 
       _html += '<li class="even"> '+ n +' </li>' 
      }else { 
       _html += '<li class="odd"> '+ n +' </li>' 
      } 
      _index++; 
     }); 
     _html += '</ul>'; 
    } 

    $body.html(_html); 
}; 

$(document).ready(function myFunction() { 
    var jsonText = '[ {"firstname":"Bill","lastname":"Gates","phone":"123-456-7891"}, {"firstname":"Steve","lastname":"Jobs","phone":"198-765-4321"}, {"firstname":"Kevin","lastname":"Spencer","phone":"007-008-0099"}, {"firstname":"David","lastname":"Zimmerman","phone":"800-256-6321"}, {"firstname":"Bert","lastname":"Ernie","phone":"127-624-1138"}, {"firstname":"Guy","lastname":"Lafleur","phone":"806-797-4213"} ]'; 
    showContacts(jsonText); 
}); 

I have also updated your fiddlejs link