Question

我使用ajax返回一些json。这是json的样子。

[{"optionValue":"11","optionDisplay":"Canon","preitem":`[{"preitemId":"15","preitemLabel":"Canon EF 100mm f\/2.8L Macro IS USM "},{"preitemId":"18","preitemLabel":"12412"},{"preitemId":"21","preitemLabel":"Sonydas1df Test"}]},{"optionValue":"20","optionDisplay":"Nikon","preitem":""},{"optionValue":"21","optionDisplay":"Audio & Aerial","preitem":""},{"optionValue":"23","optionDisplay":"Sony","preitem":[{"preitemId":"19","preitemLabel":"Sony 1412Test"},{"preitemId":"20","preitemLabel":"Son124124y Test"}]}]`

从这里你可以看到每个选项都有几个preitems。

例如佳能拥有佳能EF 100mm，12412和Sonydas1df测试。

目标是将所有内容输出到html页面。

因此，佳能将拥有自己的标题，其前面的项目。

这是我的代码。

for (var i = 0; i < j.length; i++) {
    for (var u = 0; u < j[i].preitem.length; u++) {
        preitems += j[i].preitem[u].preitemLabel+'<br>';
    }
options += '<div class="itemBlock"><b>'+ j[i].optionDisplay +'</b><input class="subcheckboxes" type="checkbox" id="checkit" value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</input><div class="" id="subcat' + j[i].optionValue + '">'+preitems+'</div></div>';

  }
$("#subcat").html(options);

主要选项（佳能等）显示得很好。但是它不会输出选项中唯一的pritems。它输出整个json返回的每个preitem。

我想只显示选项中的preitems。

由于

Answer 1

您没有重置preitems

你可能想......

for (var i = 0; i < j.length; i++) {
    preitems = '';
    for (var u = 0; u < j[i].preitem.length; u++) {
    ...

Answer 2

当遍历多维数据对象时，您需要更具体地识别哪些动作发生了多少次和哪里。如果您按照rjdown的建议重置前期项目，那么您只需挖掘所有预先项目并将其倾倒到每个项目的计划就可以了。我会尝试这样的事情：

for (var i = 0, lenj = j.length; i < lenj; i++) {
    options += '<div class="itemBlock"><b>'+ j[i].optionDisplay +'</b><input class="subcheckboxes" type="checkbox" id="checkit" value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</input><div class="" id="subcat' + j[i].optionValue + '">';
  
    for (var u = 0, lenu = j[i].preitem.length; u < lenu; u++) {
        options += j[i].preitem[u].preitemLabel+'<br>';
    }
    options += '</div></div>';

  }
$("#subcat").html(options);

我觉得这更具可读性并解决了你的问题。

双循环多维数组javascript

2 个答案: