Nested JSON to different HTML tables

Question

var myList = [
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ruleNo": "1",
    "ingredients": "sulphates",
    "id": "2"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "1",
    "ingredients": "alcohol",
    "id": "1"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "1",
    "ingredients": "total sulfur dioxide",
    "id": "3"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "3",
    "ingredients": "sulphates",
    "id": "8"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "81.5",
    "ruleNo": "3",
    "ingredients": "total sulfur dioxide",
    "id": "9"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "3",
    "ingredients": "alcohol",
    "id": "7"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "2",
    "ingredients": "total sulfur dioxide",
    "id": "6"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ingredients": "sulphates",
    "id": "5"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "2",
    "ingredients": "alcohol",
    "id": "4"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "4",
    "ingredients": "sulphates",
    "id": "11"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "155",
    "ruleNo": "4",
    "ingredients": "total sulfur dioxide",
    "id": "12"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "min": "8.5",
    "target_state": "5",
    "min_operator": "<=",
    "max_operator": " ",
    "target_parameter": "Quality",
    "ruleNo": "4",
    "ingredients": "alcohol",
    "id": "10"
  }]
];

// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
  alert(myList.length)
  for (var i = 0; i < myList.length; i++) {
    var columns = addAllColumnHeaders(myList[0]);

    for (var i = 0; i < myList.length; i++) {
      var row$ = $('<tr/>');
      for (var colIndex = 0; colIndex < columns.length; colIndex++) {
        var cellValue = myList[0][columns[colIndex]];

        if (cellValue == null) {
          cellValue = "";
        }

        row$.append($('<td/>').html(cellValue));
      }
      $("#excelDataTable").append(row$);
    }
  }

  // Adds a header row to the table and returns the set of columns.
  // Need to do union of keys from all records as some records may not contain
  // all records
  function addAllColumnHeaders(myList) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
      var rowHash = myList[i];
      for (var key in rowHash) {
        if ($.inArray(key, columnSet) == -1) {
          columnSet.push(key);
          headerTr$.append($('<th/>').html(key));
        }
      }
    }
    $("#excelDataTable").append(headerTr$);

    return columnSet;
  }
}

th {
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="buildHtmlTable()">
  <table id="excelDataTable" border="1">
  </table>
</body>

I'm writing a code where there is a json result and using this result I want to form tables using javascript.

Here is my JSON

 [
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ruleNo": "1",
    "ingredients": "sulphates",
    "id": "2"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "1",
    "ingredients": "alcohol",
    "id": "1"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "1",
    "ingredients": "total sulfur dioxide",
    "id": "3"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "3",
    "ingredients": "sulphates",
    "id": "8"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "81.5",
    "ruleNo": "3",
    "ingredients": "total sulfur dioxide",
    "id": "9"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "3",
    "ingredients": "alcohol",
    "id": "7"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "98.5",
    "ruleNo": "2",
    "ingredients": "total sulfur dioxide",
    "id": "6"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "0.575",
    "ingredients": "sulphates",
    "id": "5"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
    "ruleNo": "2",
    "ingredients": "alcohol",
    "id": "4"
  }],
  [{
    "product": "Red Wine",
    "unit": " ",
    "max": "1.98",
    "ruleNo": "4",
    "ingredients": "sulphates",
    "id": "11"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "155",
    "ruleNo": "4",
    "ingredients": "total sulfur dioxide",
    "id": "12"
  }, {
    "product": "Red Wine",
    "unit": " ",
    "max": "10.25",
       "ruleNo": "4",
    "ingredients": "alcohol",
    "id": "10"
  }]
]
    [
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "0.575",
        "ruleNo": "1",
        "ingredients": "sulphates",
        "id": "2"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "1",
        "ingredients": "alcohol",
        "id": "1"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "98.5",
        "ruleNo": "1",
        "ingredients": "total sulfur dioxide",
        "id": "3"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "1.98",
        "ruleNo": "3",
        "ingredients": "sulphates",
        "id": "8"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "81.5",
        "ruleNo": "3",
        "ingredients": "total sulfur dioxide",
        "id": "9"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "3",
        "ingredients": "alcohol",
        "id": "7"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "98.5",
        "ruleNo": "2",
        "ingredients": "total sulfur dioxide",
        "id": "6"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "0.575",
         "ruleNo": "2",

        "ingredients": "sulphates",
        "id": "5"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "2",
        "ingredients": "alcohol",
        "id": "4"
      }],
      [{
        "product": "Red Wine",
        "unit": " ",
        "max": "1.98",
        "ruleNo": "4",
        "ingredients": "sulphates",
        "id": "11"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "155",
        "ruleNo": "4",
        "ingredients": "total sulfur dioxide",
        "id": "12"
      }, {
        "product": "Red Wine",
        "unit": " ",
        "max": "10.25",
        "ruleNo": "4",
        "ingredients": "alcohol",
        "id": "10"
      }]
    ]

here when my job is to convert json into HTML Tables.

Here the json is like a big item and then each item has other items.

When I run my program, it just returns the heading. but I want the entire response printed in different tables (the inside array variables). In my current case, we've got 4 as total size. i.e. there should be 4 tables created with different tag.

Here is the fiddle (this is not working) http://jsfiddle.net/7MRx6/1922/.

please let me know on how can I do this.

Please add your code to the question itself. If that fiddle goes away or is modified, your question will instantly lose any long-term value it might have provided the community. — user47589
– user47589, Commented Dec 19, 2017 at 18:47
@Amy thanks for the quick tip :-), my code was a bit big, so thought I'll hold it there in fiddle itself. Also there are even more variables available in the fiddle. Thanks again! — user3872094
– user3872094, Commented Dec 19, 2017 at 18:50
I will retract my downvote once the question contains all the code. That wasn't a tip. A question should be able to stand on its own. — user47589
– user47589, Commented Dec 19, 2017 at 19:21

Griva · Accepted Answer · 2017-12-19 19:10:23Z

1

First of all you used 2 times the same loop with variable i - this way you incremented 'i' mulitple times.

for (var i = 0; i < myList.length; i++) { //...

Second thing you used myList without [i] in the second loop so you did actually 2 times the same thing but with double loop

for (var j = 0; j < myList[i].length; j++) {

And last thing to get cell value you need use previous values of i and j not just myList[0]

var cellValue =  myList[i][j][columns[colIndex]];

Wroking code here: fiddle here

edited Dec 19, 2017 at 19:10

answered Dec 19, 2017 at 19:06

Griva

1,73821 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3872094 Over a year ago

Yes you got it exactly

Griva Over a year ago

nice, don't forget to checkmark please but first add rest of your code in your question as @Amy suggested :) btw your code is a little messy you can do whole thing in more clear way.

Griva Over a year ago

@user3872094 if this answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.

Collectives™ on Stack Overflow

Nested JSON to different HTML tables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related