附加 JSON 对象编号 - 故障排除

Appending JSON Object Number - Troubleshooting

本文关键字：故障 排除 编号 JSON 对象 附加      更新时间：2023-09-26

我将如何正确地将对象数组中的数字输入到html内容中一次？

理想情况下，我希望对象的"category"号在 .viewed 类的最后一个跨度之后输入。最终结果将遵循类似以下内容的内容。

约瑟夫迈克尔斯和另外3人看过这篇文章。 #4

JSON 文件的示例：

{
  "profiles": [
    { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 2 },
    { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 2 },
    { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 3 },
    { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 3 },
    { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 3 },
    { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 3 },
    { "firstName" : "Roy", "lastName" : "Harper", "gender": "male", "category": 4 },
    { "firstName" : "Joseph", "lastName" : "Michaels", "gender": "male", "category": 4 },
    { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 4 }
  ]
}

JS文件的一部分：

if (obj.category == 4) {
    $('.contentBox:nth-child(4) .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');
    //$('.contentBox:nth-child(4) .viewed').append('<span class="categoryNumber">' + obj.category + '</span>');
}

目前，代码在一行中多次输入<span class="categoryNumber"></span>。因此，类别编号显示多次。

这种情况的最佳解决方案是什么？

查看当前的 Plunker。

要阻止它多次输出，您可以检查是否已经输出了标记：

if( ! $('.contentBox .categoryNumber').length){
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');
}

这只是一个快速解决方案，但是我会考虑在输出html之前更多地组织您的数据。根据类别将数据组织到一个多维数组中，将每个数组中的第一个作为前面的名称，并对每个类别数组执行 .length 将以更优雅的方式生成您需要的标记字符串，并且代码更少。

此外，由于您在每次迭代中迭代和输出标记的方式，上面的选择器将在错误的位置输出，如上所述的重构将消除此问题！ :)

我认为你没有正确处理这个问题。您不想将对象的类别编号附加到范围 - 您想查看 .contentBoxdiv 的索引。您可以通过 JQuery API 的 '.each（）' 方法访问它。

您可以循环访问内容框，将其索引添加到要修改的范围。

例如，您可以将此添加到检查查看器函数中：

$('.viewed').each(function(index){
  $(this).last().append(' #' + index);
});

顺便一提。。。您可以通过将 for 循环替换为以下内容来大大简化代码：

responseObject.profiles.forEach(function(obj){
    $('.contentBox:nth-child(' + obj.category + ') .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
});

（如果复制并粘贴到 IDE 中，您将更容易理解它）

希望它有帮助;}

相关文章：