Javascript 在表单元格中循环对象并创建无序列表

我有一个表，其中有一列单元格可能包含值，也可能不包含值，但当它包含值时，它是JSON格式的；否则它将为空（null）

---

提前感谢。

要实现这一点，您只需要两个循环，一个循环通过

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

$（'.fpdCell'）。每个（函数（）{
var$el=$（this），html=''；
$.each（JSON.parse（$el.text（）），函数（i，obj）{
html+='
'+obj.date+'
；
})
$el.append（“
”+html+“
”）；
});

var theCells=$（'.fpdCell'）；
$.each（单元格，函数（）{
var cellValues=$.parseJSON（$（this.text（））；
如果（单元格值！=“null”）{
console.log（cellValues）；
$（this.html（“”）；
var list='
；
对于（var u=0；u；
console.log（cellValues[u].date）；
}
如果（cellValues.length>0）
列表+=“
”；
$（此）.append（列表）；
}

fpdcell列中的对象是逻辑中可能遗漏的数组对象

还有一件事，可能是输入错误，但是您在注释代码中将列表项附加到

ul

：）中遗漏了

）

下面是一个解决方案，它循环遍历数组，然后循环遍历每个数组元素中的各个元素，以创建一个线性列表

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

var theCells=$（'.fpdCell'）；
$。每个（单元格、函数（索引、值）{
var cellValues=JSON.parse（value.textContent）；
如果（单元格值！=“null”）{
$（value）.html（“
”；
$.each（cellValues，函数）（cellValueIndex，cellValue）{
for（单元格值中的var prop）{
$（'.ul'+index）.append（'
'+cellValue[prop]+'
'）；
}
});
}否则{
$（value.html（“”）；
}
});

这可能不是您所寻找的确切解决方案，但是，应该可以帮助您沿着您想要的路线前进。祝您编码愉快

---

这里是一个解决方案

谢谢。这是一个艰难的决定，所有提供的答案都以这样或那样的方式工作。我在您的答案中添加的唯一一件事是在插入列表元素之前将

$el.text（“”）

清空到单元格。

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

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

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