CODEWITHSUNDEEP
javascriptjqueryjson
user1177860
user1177860

Reputation: 509

Issues with nested for loop with table output in javascript

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
         ]
      }
   ]
}

I've written the following script to out put a table

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);

But I'm having problems with nested for loop so that I can join up the td cells.

I don't want the Categories to repeat.

demo: https://jsfiddle.net/zidski/2vu5rkav/

The output I'm trying to achieve: https://jsfiddle.net/zidski/adomo46w/

Upvotes: 1

Views: 89

Answers (3)

Benjamin Evans
Benjamin Evans

Reputation: 146

The for loops are nested wrong. You only need to loop through the categories once.

I have made some changes to your code.

Old:

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

New:

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>

Upvotes: 1

Aitor Aznar &#193;lvarez
Aitor Aznar &#193;lvarez

Reputation: 498

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>

Upvotes: 1

SidOfc
SidOfc

Reputation: 4584

Alright, changed your example a little bit as you can see here: fiddle

I basically inverted your nested for loop so that it would loop over categories once and since your data matches your categories we can use the outer i within the inner loop to get the correct data.

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

This works because serData2.length results in 2 which means that there will be two additional td's added within the same category before it moves on to the next.

Since the outer loop will only continue to the next loop after the inner loop is finished it will wait until the inner loop created the two td elements with the same i value.

In your first category iteration i will equal 0 and the nested loop will start with j being 0 too however the inner loop keeps running until it's done processing every element of serData2 which then afterwards causes the outer loop to increment.

The above result adds some additional explanation which I hope is clear to you, if you need a more clear explanation I'd be happy to give it since I can imagine this is quite confusing.

Anyways, I hope it helps you out but always try to understand what is happening :)

Upvotes: 2

Related Questions