双循环多维数组javascript答案

【问题标题】：Double for loop multidimensional array javascript双循环多维数组javascript
【发布时间】：2015-02-27 02:24:03
【问题描述】：

我正在使用 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"}]}]`

从这里可以看到，每个选项都有一些前置项。

例如，Canon 的前置项目 Canon EF 100mm、12412 和 Sonydas1df Test。

目标是将所有内容输出到 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。

我只想显示选项中的预项。

谢谢

【问题讨论】：

标签： javascript php arrays json multidimensional-array

【解决方案1】：

你没有重置preitems

你可能想要...

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

【讨论】：

【解决方案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);

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

【讨论】：