Objekt in einer Tabellenzelle schleifen und eine ungeordnete Liste erstellen

Question

Ich habe diese Tabelle, die eine Spalte hat, in der die Zelle möglicherweise einen Wert enthält oder nicht, aber wenn es das tut, ist es in einem JSON-Format; Ansonsten ist es leer (null).

<table> 

<tbody> 
<tr> 
    <td>Barley</td> 
    <td>AK, AZ</td> 
    <td class="fpdCell">[{"date":"06/01/2016","error":"Double/Triple cropping","id":2},{"date":"06/07/2016","error":"Lack of Planting Dates Established","id":2}]</td> 
    <td>null</td> 
</tr> 
<tr> 
    <td>Barley</td> 
    <td>AK, AZ, AR</td> 
    <td class="fpdCell">[{"date":"06/04/2016","error":"No Error Found","id":3},{"date":"06/27/2016","error":"Lack of Planting Dates Established","id":3},{"date":"06/28/2016","error":"Weather Patterns","id":3}]</td> 
    <td>null</td> 
</tr> 
<tr> 
    <td>Burley Tobacco</td> 
    <td>null</td> 
    <td class="fpdCell">null</td> 
    <td>null</td> 
</tr> 
<tr> 
    <td>Fire Cured Tobbacco</td> 
    <td>null</td> 
    <td class="fpdCell">null</td> 
    <td>null</td> 
</tr> 
<tr> 
    <td>Flue Cured Tobacco</td> 
    <td>null</td> 
    <td class="fpdCell">null</td> 
    <td>null</td> 
</tr> 
<tr> 
    <td>Oats</td> 
    <td>null</td> 
    <td class="fpdCell">null</td> 
    <td>null</td> 
</tr> 

Was muss ich durch jede der Zellen mit dem fpdCell Klasse, Schleife das Objekt innerhalb jedes dieser Zelle ist in einer Schleife tun, um eine Liste zu erstellen und sie als Listenelement hinzufügen.

Dies ist so weit wie ich konnte. Ich weiß wirklich nicht, wie ich mich von hier fortbewegen soll.

var theCells = $('.fpdCell'); 
$.each(theCells, function(index, value) { 

var cellValues = $.parseJSON(value.textContent); 

if (cellValues != 'null') { 
    console.log(cellValues); 
    value.textContent = ''; 
    $(value).append('<ul class="list-group ul'+index+'"></ul>') 

    //then add <li class="list-group-item">Test</li> 

//Not working------------------ 
/* 
    for (var u = 0; u < cellValues. length; u++) { 
    $('ul' + index).append('<li class="list-group-item">'+cellValues[u].date+'</li>'); 
    console.log(cellValues[u].date); 
} 

*/ 
    } 
}); 

Vielen Dank im Voraus.

Answer 1

Um dies zu erreichen, brauchen Sie nur zwei Schleifen, eine durch die .fpdCell Elemente gehen, die andere durch die geparste JSON gehen und den HTML-Code der ul erstellen. Versuchen Sie folgendes:

$('.fpdCell').each(function() { 
    var $el = $(this), html = ''; 
    $.each(JSON.parse($el.text()), function(i, obj) { 
     html += '<li class="list-group-item">' + obj.date + '</li>'; 
    }) 
    $el.append('<ul>' + html + '</ul>'); 
}); 

Working example

Answer 2

var theCells = $('.fpdCell'); 
$.each(theCells, function() { 

    var cellValues = $.parseJSON($(this).text()); 

    if (cellValues != 'null') { 
     console.log(cellValues); 
     $(this).html(""); 

     var list = '<ul class="list-group ul'+index+'">'; 

     for (var u = 0; u < cellValues.length; u++) { 
      list+='<li class="list-group-item">'+cellValues[u].date+'</li>'; 
      console.log(cellValues[u].date); 
     } 

    if(cellValues.length>0) 
     list+="</ul>"; 

    $(this).append(list); 
} 

Answer 3

Die Objekte in den fpdcell Spalten sind Array-Objekte, die Sie in Ihrer Logik verpasst haben.

Eine weitere Sache, kann ein Tippfehler sein, aber Sie . im kommentierten Code verpasst Listenelemente zum ul :)

Hier ist eine Lösung, die durch das Array-Schleifen anhängen und dann in einer Schleife durch die einzelne Elemente in jedem Array-Element, um eine lineare Liste zu erstellen.

var theCells = $('.fpdCell'); 
$.each(theCells, function(index, value) { 
    var cellValues = JSON.parse(value.textContent); 
    if (cellValues != 'null') { 
    $(value).html('<ul class="list-group ul'+index+'"></ul>'); 
    $.each(cellValues, function(cellValueIndex, cellValue){ 
     for (var prop in cellValue) { 
     $('.ul'+index).append('<li class="list-group-item">'+ cellValue[prop] +'</li>'); 
     } 
    }); 
    } else { 
    $(value).html(''); 
    } 
}); 

Dies kann nicht die exakte Lösung sein, was Sie suchen, aber sollten Sie entlang der Linie helfen Sie gehen wollen würde. Glückliche Kodierung.

Hier ist eine Geige mit der Lösung JSFiddle