循环遍历字符串数组并吐出标记

Question

我有一系列具有“类别”和“条目”的类别。条目有一组逗号分隔的字符串。我试图遍历每个类别以填充一个按钮（并且它正在工作），但是我无法弄清楚如何遍历每个充满字符串的“条目”数组并将每个字符串放入与“类别”相关的“li”元素中。  真的会使用建议。

这是我的CodePan阵风，看看发生了什么。

    $(function() {
  var healthTab = "https://cdn.contentful.com/spaces/od09thh3aiwm/entries/?access_token=cc0fe7d7a6e85023656d817693d2aca605401c4cb3d967fc8df3dbe712b24ce4&select=fields.diseaseLongName,fields.diseaseCategory&content_type=disorder";
  
  $.getJSON( healthTab, function( data ) {  
    var diseaseEntries = data.items;
    var diseaseCategory = [];
    var diseasesGrouped = [];
    var markup = "";
    
    // Create a unique list of disease categories
    $.each(diseaseEntries, function (counter, val) {
      var thisDisease = diseaseEntries[counter].fields.diseaseCategory;
      if(!diseaseCategory.includes(thisDisease)){
        diseaseCategory.push(val.fields.diseaseCategory);
      }
    });
    
    // Sort that list alphabetically
    diseaseCategory.sort();
    
    // Add each category to an array so we can associate entries with it later
    $.each(diseaseCategory , function( counter, val){
      var disease = {};
      disease.category = diseaseCategory[counter];
      disease.entries = []; 
      diseasesGrouped.push(disease); 
     });
   
    
    // Add entries to diseasesGrouped based if their category matches
     $.each(diseaseEntries, function( counter, val){
       var currentCategory = diseaseEntries[counter].fields.diseaseCategory;
       var currentLongname = diseaseEntries[counter].fields.diseaseLongName;
       var myDiseaseIndex = null;
       
       for(var i= 0, l = diseasesGrouped.length; i< l; i++){
         if(diseasesGrouped[i].category === currentCategory ){
            myDiseaseIndex = i;
         }
       }
       
       // Push all the diseases that match the 
       diseasesGrouped[myDiseaseIndex].entries.push(currentLongname);
     }); 
    
    // Add all the full disease names within each category
    $.each(diseasesGrouped, function( counter, val){
     
      diseasesGrouped[counter].entries.sort();
      markup +="<div class='js-accordion' data-accordion-prefix-classes='breeds-list__alphabetic'>";
        markup +="<button class='js-accordion__header'>" +  diseasesGrouped[counter].category + "</button>";
          markup +="<div class='js-accordion__panel'>"
            markup +="<ul>";
              // spit out list
              $.each( diseasesGrouped, function( counter, val ) {
                
                markup +=diseasesGrouped[counter].entries;
                // $.each(diseasesGrouped[counter].entries, function(counter, val){
                //    markup +="<li class='list'>";
                //     markup +=diseasesGrouped[val];
                //    markup +="</li>";
                // });
                
              });
             
            markup +="</ul>";
          markup +="</div>";
        markup +="</div>";

      
    });
    $(".health-list").append(markup);
    console.log("diseasesGrouped");
    console.log(diseasesGrouped);
  });
  
  
  //   function enableAccordion() {
  //   $(document).on('click', '.js-accordion', function(){
  //     if($(this).hasClass('js-accordion--active')){
  //       $(this).removeClass('js-accordion--active');
  //     } else {
  //       $(this).addClass('js-accordion--active');
  //     }
  //   });
  // }
  
});