Make an html table using a JSON object

Question

I know there are a lot of similar questions out there. This code is a Frankenstein of a lot of other stack overflow questions. But I am so close I just don't understand the code I've been trying to use an examples very well. Here is my html page:

<!DOCTYPE html>
<html>
    <script src="Scripts.js"></script> 
    <script>


    </script>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

</head>

<body>

    <p id="demo"></p>


    <script>

      obj.Blades.forEach(element => {
          var name = element.Name + " " + element.Damage;
          document.write(name + "<br >");
      });
    </script>

<input type="button" value="Generate Table" onclick="makeTable()" />
<hr />
<div id="dvTable"></div>

</body>
</html>

And here is the Java Script page:


var jsonStuff = '{ "Blades" : [' +
'{ "Name":"Longsword" , "Damage":"l2d" },' +
'{ "Name":"Dagger" , "Damage":"l3d" },' +
'{ "Name":"Mace" , "Damage":"l4d" },' +
'{ "Name":"Spear" , "Damage":"l5d" } ]}'; 


var obj = JSON.parse(jsonStuff);

function makeTable(){
  //Create a HTML Table element.
  var table = document.createElement("TABLE");
  table.border = "1"

 //Get the count of columns.
 var columnCount = Object.keys(obj.Blades).length;

 //Add the header row.
 var row = table.insertRow(-1);
   for (var i = 0; i < columnCount; i++) {
       var headerCell = document.createElement("TH");
       headerCell.innerHTML = obj.Blades[i].Name;
       row.appendChild(headerCell);
   }

    //Add the data rows.
    for (var i = 1; i < obj.Blades.length; i++) {

       row = table.insertRow(-1);
       for (var j = 0; j < columnCount; j++) {
           console.log(obj.Blades[j].Damage);
           var cell = row.insertCell(-1);
           cell.innerHTML = obj.Blades[i][j];
       }
   }

   var dvTable = document.getElementById("dvTable");
   dvTable.innerHTML = "";
   dvTable.appendChild(table);
}

This is what it looks like right now:

So I know the problem has to be somewhere in the section of JavaScript commented "add the Data rows". I'm just now sure how to go about it.

An image of your browser is not very helpful. Please open your browser's dev tools and look at the current generated HTML in your browser and see what is wrong. — kmoser
– kmoser, Commented Apr 22, 2020 at 3:06

Dave H. · Accepted Answer · 2020-04-22 03:08:17Z

1

I believe your problem is with the line:

cell.innerHTML = obj.Blades[i][j];

You are referring to Blades as if it were a 2-dimensional array, when in fact it is an array of objects. You're going to need to have something like this to avoid the undefined:

cell.innerHTML = obj.Blades[i].Name;
cell.innerHTML = obj.Blades[i].Damage;

answered Apr 22, 2020 at 3:08

Dave H.

6751 gold badge6 silver badges18 bronze badges

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

1 Comment

Cole Perry Over a year ago

Yes this helped a lot. No longer undefined but the correct info isnt quite displaying. Thank you though.

Collectives™ on Stack Overflow

Make an html table using a JSON object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related