Javascript 追加JSON对象号-疑难解答

如何从一个对象数组中正确地输入一个数字，只在html内容中输入一次

理想情况下，我希望对象的

“category”

编号在

查看的
类中的最后一个span之后输入。最终的结果将遵循

约瑟夫·迈克尔斯和另外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>');
}

if（对象类别==4）{
$（'.contentBox:n个子项（4.viewsed'）.append（''+obj.firstName+''+obj.lastName+''）；
$（'.contentBox:n个子项（4）.查看范围：最后一个子项'）.append（''+obj.category+''）；
//$（'.contentBox:n个子项（4.view'）.append（''+obj.category+''）；
}

当前代码在一行中多次输入
。因此，类别编号显示倍数

对于这种情况，最好的解决方案是什么

查看当前标记。
要停止它多次输出，只需检查是否已输出标记：

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

if（！$（'.contentBox.categoryNumber'）.length）{
$（'.contentBox:n个子项（4）.查看范围：最后一个子项'）.append（''+obj.category+''）；
}

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

此外，由于您在每次迭代中迭代和输出标记的方式，上述选择器将输出到错误的位置，按照上述方式进行重构将消除此问题！：）
 我认为你没有正确处理这个问题。您不想将对象的类别号附加到span中—您想查看.contentBox div的索引。您可以通过JQuery API的“.each（）”方法访问它

您可以迭代内容框，将它们的索引添加到要修改的范围中

例如，您可以将以下内容添加到CheckViewer函数中：

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

responseObject.profiles.forEach（函数（obj））{
$（'.contentBox:n个子（'+obj.category+'）.viewsed'）.append（''+obj.firstName+''+obj.lastName+''）；
});

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

希望有帮助；}