i have table has column in cell may or may not contain value, when does, in json format; otherwise empty (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>
what need loop through each of cells fpdcell class, loop object inside of each of cell, create list , add them list element.
this far able get. don't know how move forward here.
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------------------ /* (var u = 0; u < cellvalues. length; u++) { $('ul' + index).append('<li class="list-group-item">'+cellvalues[u].date+'</li>'); console.log(cellvalues[u].date); } */ } }); thanks in advance.
to achieve need 2 loops, 1 go through .fpdcell elements, other go through parsed json , build html of ul. try this:
$('.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>'); }); 