javascript - 在表格单元格内循环对象并创建无序列表

Question

我的这个表有一列，其中的单元格可能包含也可能不包含值，但是当它包含时，它是 JSON 格式；否则它将为空 (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>

我需要做的是使用 fpdCell 类遍历每个单元格，在每个单元格中循环对象，创建一个列表并将它们添加为列表元素。

这是我所能得到的。我真的不知道如何从这里前进。

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

 */
   }
 });

提前致谢。

Answer 1

要实现这一点，您只需要两个循环，一个遍历 .fpdCell 元素，另一个遍历解析的 JSON 并构建 ul 的 HTML .试试这个:

$('.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