javascript 中带有表输出的嵌套 for 循环的问题

好的，稍微改变了你的例子，你在这里看到： 小提琴

我基本上反转了嵌套的for循环，以便它会循环一次类别，并且由于您的数据与您的类别匹配，因此我们可以使用内部循环中的外部i来获取正确的数据。

//list categories once.
for (var i = 0; i < catData.length; i++) {
    // make tr for each category.
    tmp += '<tr>';
    //first td is always the category in your tr but we'd repeat it within the nested loop so we don't want to do that.
    tmp += '<td>' + catData[i] + '</td>';
    //in here we loop through the data, append more TD's to the same TR.
    for (var j = 0; j < serData2.length; j++) {
        //here we add more td's to the same tr.
        tmp += '<td>' + serData2[j]['data'][i] + '</td>';
    }
    //close tr for category
    tmp += '</tr>';
}

这是有效的serData2.length结果是2这意味着在移动到下一个类别之前，将在同一类别中添加两个额外的td。

完成后继续到下一个循环，因此它将等待内部循环创建具有相同i值的两个td元素。

在第一个类别迭代中，i 将等于 0，嵌套循环也将从0 j开始，但内部循环会继续运行，直到它完成处理完serData2的每个元素，然后导致外部循环增加。

上面的结果增加了一些额外的解释，我希望你清楚，如果你需要一个更清晰的解释，我很乐意给出它，因为我可以想象这很令人困惑。

无论如何，我希望它对您有所帮助，但始终尝试了解正在发生的事情:)

var data = {
   "categories":[
      "Early Years (RA)",
      "Primary schools (RA)",
      "Secondary schools (RA)",
      "Special schls and alter prov (RA)",
      "Post-16 provision (RA)",
      "Other edu and community budget (RA)",
      "TOTAL EDUCATION SERVICES (RA)"
   ],
   "series":[
      {
         "name":"Buckinghamshire",
         "data":[
            50,
            57.69,
            80.77,
            38.46,
            38.46,
            0,
            57.69
         ]
      },
      {
         "name":"North Yorkshire",
         "data":[
            23.08,
            42.31,
            84.62,
            26.92,
            96.15,
            80.77,
            65.38
         ]
      }
   ],
   "series2":[
      {
         "name":"Buckinghamshire",
         "data":[
            31445,
            211906,
            167363,
            29322,
            4520,
            6827,
            451383
         ]
      },
      {
         "name":"North Yorkshire",
         "data":[
            24390,
            180012,
            176206,
            26710,
            16981,
            50324,
            474623
         ]
      }
   ]
};
var json = JSON.stringify(data),
    obj = JSON && JSON.parse(json) || $.parseJSON(json);
var catData = obj.categories;
var serData = obj.series;
var serData2 = obj.series2;
$("#chartProfileOutput").html(' ');
$("#chartProfileOutput").css('height', 'auto');
var tmp = "";
var ln = json.length;
tmp += '<table class="uk-table uk-table-striped default-table profile-table">'n';
tmp += '<thead>'n';
tmp += '<tr>'n';
tmp += '<th></th>'n';
for (var i = 0; i < serData2.length; i++) {
    tmp += '<th>' + serData2[i]["name"] + '</th>'n';
}
tmp += '<tr>'n';
tmp += '</thead>'n';
for (var j = 0; j < catData.length; j++) {
    tmp += '<tr>'n';
    tmp += '<td>' + catData[j] + '</td>'n';
    for (var k = 0; k < serData2.length; k++) {
        tmp += '<td>' + serData2[k]['data'][j] + '</td>'n';
    }
    tmp += '</tr>'n';
}
tmp += '</table>'n';
$("#chartProfileOutput").html(tmp);

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="chartProfileOutput"></div>

for循环嵌套错误。您只需遍历一次类别。

我对您的代码进行了一些更改。

老：

for (var i = 0; i < serData2.length; i++) {
    for (var j = 0; j < catData.length; j++) {
        tmp += '<tr>'n';
        tmp += '<td>' + catData[j] + '</td>'n';
        tmp += '</tr>'n';
    }
    for (var k = 0; k < serData2[i].data.length; k++) {
        tmp += '<td>' + serData2[i]['data'][k] + '</td>'n';
    }
}

新增功能：

for (var j = 0; j < catData.length; j++) {
  // Get Category
  tmp += '<tr>'n';
  tmp += '<td>' + catData[j] + '</td>'n';
  for (var i = 0; i < serData2.length; i++) {
    // Get results
    tmp += '<td>' + serData2[i].data[j] + '</td>'n';
  }
  tmp += '</tr>'n';
}

var data = {
  "categories": [
    "Early Years (RA)",
    "Primary schools (RA)",
    "Secondary schools (RA)",
    "Special schls and alter prov (RA)",
    "Post-16 provision (RA)",
    "Other edu and community budget (RA)",
    "TOTAL EDUCATION SERVICES (RA)"
  ],
  "series": [{
    "name": "Buckinghamshire",
    "data": [
      50,
      57.69,
      80.77,
      38.46,
      38.46,
      0,
      57.69
    ]
  }, {
    "name": "North Yorkshire",
    "data": [
      23.08,
      42.31,
      84.62,
      26.92,
      96.15,
      80.77,
      65.38
    ]
  }],
  "series2": [{
    "name": "Buckinghamshire",
    "data": [
      31445,
      211906,
      167363,
      29322,
      4520,
      6827,
      451383
    ]
  }, {
    "name": "North Yorkshire",
    "data": [
      24390,
      180012,
      176206,
      26710,
      16981,
      50324,
      474623
    ]
  }]
}
var json = JSON.stringify(data),
  obj = JSON && JSON.parse(json) || $.parseJSON(json);
var catData = obj.categories;
var serData = obj.series;
var serData2 = obj.series2;
$("#chartProfileOutput").html(' ');
$("#chartProfileOutput").css('height', 'auto');
var tmp = "";
var ln = json.length;
tmp += '<table class="uk-table uk-table-striped default-table profile-table">'n';
tmp += '<thead>'n';
tmp += '<tr>'n';
tmp += '<th></th>'n';
for (var i = 0; i < serData2.length; i++) {
  tmp += '<th>' + serData2[i]["name"] + '</th>'n';
}
tmp += '<tr>'n';
tmp += '</thead>'n';
for (var j = 0; j < catData.length; j++) {
  tmp += '<tr>'n';
  tmp += '<td>' + catData[j] + '</td>'n';
  for (var i = 0; i < serData2.length; i++) {
    tmp += '<td>' + serData2[i].data[j] + '</td>'n';
  }
  tmp += '</tr>'n';
}
tmp += '</table>'n';
$("#chartProfileOutput").html(tmp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chartProfileOutput"></div>