convert the JSON string to a JavaScript object then create a HTML table

Question

I need some help with JSON string operating. The thing I want to do is convert the JSON string to a JavaScript object and make the HTML file look like below. The first thing I do was use var obj = JSON.parse ( jsonstring ); to put JSON string to JavaScript object. After that, I wish to use for loop to traverse all the attributes in the JavaScript object then use the value to create the table. However, I fail to acquire the name of vote,name,race and gender etc. instead of its value by using .name . Loop control malfunctioning as well. .length always return something undefine error. I will be grateful for any help you can provide. Looking forward to hearing from you.

Which Character Is The Best?

Characters: StarWarsCharacters

Record No.: 2

Senses: enter image description here

enter code here

 var obj = JSON.parse ( jsonstring ); var labelsName = obj.labels[0]; var sensesName = obj.senses[0]; createTable(obj) function createTable(obj) { var table = document.createElement("table"); table.setAttribute("width","100%"); table.setAttribute("border","1"); table.borderColor="#FFFFFF"; table.cellSpacing="0"; table.cellpadding="0"; table.borderColorDark="#FFFFFF"; table.borderColorLight="#AAAAAA"; parentTd = document.getElementById("parentTd"); //console.log(" parentTd=", parentTd); parentTd.appendChild(table); var header = table.createTHead(); header.bgColor="#EEEEEE"; var headerrow = header.insertRow(0); headerrow.height="27"; var labels = var.getElementsByTagName("labels"); var senses = var.getElementsByTagName("senses"); for( var i = 0; i < obj.length; i++ ) { var rowObj = obj[i]; for( var key in rowObj){ console.log(" key =: ", key); console.log(" rowObj[key] =: ", rowObj[key]); } }

 <html> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <body> <h1>Which Character Is The Best?</h1> <div valign="top" id="parentTd">&nbsp;</div> <script> var jsonstring = ' { "labels": [ ' + '{ "Characters": "StarWarsCharacters", "Record No.": 2, '+ ' "Senses": [ { "vote": 34411224, "name": "Obi-Wan Kenobi", "race": "Human", "gender": "Male"}, ' + ' { "vote": 34458794, "name": "Anakin Skywalker", "race": "Human", "gender": "Male"} ] } ] }' </script> </body> </html>

Answer 1

Here is an example of what you can do :

for (var i = 0; i < json.labels.length; i++){
    for (var j = 0; j < json.labels[i].Senses.length; j++){
        document.getElementById('table').innerHTML += 
               '<tr><td>' + json.labels[i].Senses[j].gender + 
               '</td><td>' + json.labels[i].Senses[j].name + 
               '</td><td>' + json.labels[i].Senses[j].race + 
               '</td><td>'+ json.labels[i].Senses[j].vote + 
               '</td></tr>';   
   }    
}

Maybe you can try adding the headers dynamically using :

console.log(Object.keys(json.labels[0].Senses[0]));

which returns an array :

[ "vote", "name", "race", "gender" ]

Fiddle

convert the JSON string to a JavaScript object then create a HTML table

Question

1 answers

solution1
0 ACCPTED 2016-04-01 09:41:26

convert the JSON string to a JavaScript object then create a HTML table

Question

1 answers

solution1 0 ACCPTED 2016-04-01 09:41:26

solution1
0 ACCPTED 2016-04-01 09:41:26