loop table cell

by neildcruz19

HTML

<table border="1">
  <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>

JavaScript

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('');
  }
});