javascript

时间：2015-11-26 10:11:37

标签： javascript jquery json 

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 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';
                        }
                    }

                    tmp += '</table>\n';

 $("#chartProfileOutput").html(tmp);

但是我遇到嵌套for循环的问题，这样我才能加入td单元格。

我不想重复这些类别。

演示：https://jsfiddle.net/zidski/2vu5rkav/

我想要实现的输出：https://jsfiddle.net/zidski/adomo46w/

3 个答案:

答案 0 :(得分：2)

好的，你可以在这里看到一点点改变你的例子：fiddle

我基本上颠倒了你的嵌套for循环，这样它就可以遍历类别一次，因为你的数据与你的类别匹配，我们可以使用内部循环中的外部i来获取正确的数据。 / p> 

//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。

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

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

上述结果增加了一些额外的解释，我希望你能清楚，如果你需要一个更清晰的解释，我很乐意给它，因为我可以想象这很混乱。

无论如何，我希望它可以帮助你，但总是试图了解发生了什么：）

答案 1 :(得分：1)

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>

答案 2 :(得分：1)

$ touch conf/web.xml 循环嵌套错误。您只需要遍历类别一次。

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

旧：

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';
    }
}

＆＃13;
＆＃13; 
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';
}
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题