convert json to html table using jquery

Question

I am a beginner in coding and currently I'm trying to take the information from my json file and create a table in html. I'm using atom code editor and I am trying to get javascript to loop through all the data to make a table through using jQuery. I have tried to pull the information from my json file using jquery countless amounts of times but I seem to be doing something wrong. I've looked through plenty of forums and have tried different codes but none of them seem to work. The Json code is below. Thanks.

[
  {
    "Season": 2006-2007,
    "Team": "P4two Ballers Osnabrueck",
    "Games": 32,
    "FG%": 65,
    "FT%": 71,
    "Assists": 4.5,
    "Steals": 1.8,
    "Blocks": 1.5,
    "TRB": 11.9,
    "Points Per Game": 16.7
  },
  {
    "Season": 2007-2008,
    "Team": "TG Renesas Landshut",
    "Games": 26,
    "FG%": 67,
    "FT%": 68,
    "Assists": 5,
    "Steals": 1.2,
    "Blocks": 0.8,
    "TRB": 16.3,
    "Points Per Game": 14.5
  },
    {
      "Season": 2008-2009,
      "Team": "Head Attack Erding",
      "Games": 20,
      "FG%": 69,
      "FT%": 75,
      "Assists": 6.2,
      "Steals": 2.3,
      "Blocks": 1.2,
      "TRB": 17.1,
      "Points Per Game": 12.8
    },
    {
      "Season": 2009-2010,
      "Team": "Deportivo Espanol de Talca",
      "Games": 22,
      "FG%": 66.5,
      "FT%": 71,
      "Assists": 4.1,
      "Steals": 2,
      "Blocks": 2,
      "TRB": 11.6,
      "Points Per Game": 16.8
    },
    {
      "Season": 2011,
      "Team": "Club Trouville Montevideo",
      "Games": 8,
      "FG%": 65,
      "FT%": 75,
      "Assists": 4.8,
      "Steals": 3,
      "Blocks": 1.8,
      "TRB": 15,
      "Points Per Game": 25
    },
    {
      "Season": 2011-2012,
      "Team": "San Isidro San Francisco",
      "Games": 54,
      "FG%": 62,
      "FT%": 68,
      "Assists": 4,
      "Steals": 2.3,
      "Blocks": 1.1,
      "TRB": 13,
      "Points Per Game": 12.5
    },
    {
      "Season": 2012-2013,
      "Team": "Club Providencia",
      "Games": 48,
      "FG%": 64.5,
      "FT%": 70,
      "Assists": 6,
      "Steals": 3.8,
      "Blocks": 2.1,
      "TRB": 13,
      "Points Per Game": 25
    },
    {
      "Season": 2013,
      "Team": "Academia de la Montana",
      "Games": 17,
      "FG%": 59.9,
      "FT%": 62,
      "Assists": 1.5,
      "Steals": 1.2,
      "Blocks": 1,
      "TRB": 11.4,
      "Points Per Game": 18.4
    },
    {
      "Season": 2013-2014,
      "Team": "Baskets Vilsbiburg",
      "Games": 26,
      "FG%": 59.3,
      "FT%": 49.6,
      "Assists": 1.5,
      "Steals": 1.3,
      "Blocks": 2,
      "TRB": 14.8,
      "Points Per Game": 24.7
    },
    {
      "Season": 2015,
      "Team": "Pirates de Bogota",
      "Games": 20,
      "FG%": 59.3,
      "FT%": 54.8,
      "Assists": 1.7,
      "Steals": 2.3,
      "Blocks": 0.7,
      "TRB": 10.9,
      "Points Per Game": 14.3
    },
    {
      "Season": 2015-2016,
      "Team": "CD Tinguiririca San Fernando",
      "Games": 17,
      "FG%": 56.8,
      "FT%": 61.4,
      "Assists": 1.1,
      "Steals": 2.2,
      "Blocks": 0.9,
      "TRB": 11,
      "Points Per Game": 13.1
    },
    {
      "Season": 2016-2017,
      "Team": "CD Universidad Catolica de Santiago",
      "Games": 39,
      "FG%": 48.1,
      "FT%": 56.1,
      "Assists": 1.8,
      "Steals": 2.3,
      "Blocks": 0.7,
      "TRB": 11.6,
      "Points Per Game": 15.2
    }
    {
      "Career": " ",
      "Team": " ",
      "Games": 329,
      "FG%": 66.8,
      "FT%": 65.2,
      "Assists": 3.5,
      "Steals": 2.2,
      "Blocks": 1.3,
      "TRB": 13.1,
      "Points Per Game": 17.4
    }
 ]

Can you show us what you want the table to look like and what you have tried? — No Name, Aug 14 '18 at 18:54
Go on to jsfiddle.com and paste what you've already tried. It'll be much easier for people to help you — Eric Yang, Aug 14 '18 at 18:54
Instead of jsfiddle.net, use Stack Snippets (icon looks like `<>`; see [I've been told to create a "runnable" example with "Stack Snippets", how do I do that?](https://meta.stackoverflow.com/q/358992)) and make sure all relevant code is on this site as an [mcve]. — Heretic Monkey, Aug 14 '18 at 18:59
similar question https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table — RoryGS, Aug 14 '18 at 19:11
It looks like the JSON is not well formed. I used this site to test it. https://jsonlint.com/ — jeffld, Aug 15 '18 at 13:13
I attempted to fix the JSON. https://codepen.io/anon/pen/rrgpwr — jeffld, Aug 15 '18 at 13:23

score 5 · Accepted Answer · answered Aug 14 '18 at 19:53

5

Assuming you have a well-formatted JSON file, you can do It like this:

$(document).ready(function() {
  // $.getJSON(url, callback);
  $.getJSON('https://api.myjson.com/bins/aruak', function(json) {
    tableGenerator('#tableName', json);
  });
});

function tableGenerator(selector, data) { // data is an array
  var keys = Object.keys(Object.assign({}, ...data));// Get the keys to make the header
  // Add header
  var head = '<thead><tr>';
  keys.forEach(function(key) {
    head += '<th>'+key+'</th>';
  });
  $(selector).append(head+'</tr></thead>');
  // Add body
  var body = '<tbody>';
  data.forEach(function(obj) { // For each row
    var row = '<tr>';
    keys.forEach(function(key) { // For each column
      row += '<td>';
      if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space.
        row += obj[key];
      }
      row += '</td>';
    });
    body += row+'<tr>';
  })
  $(selector).append(body+'</tbody>');
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<table id="tableName"></table>

answered Aug 14 '18 at 19:53

JCAguilera

944
1
13
32

Thank you very much for the help. The code seemed to work. I just have a couple more questions. I see that you created a rest api? Am I correct? Would I need to create my own api to use in my project? Because I have been reading up on information about api keys. Also, I'm trying to create a for loop to get the averages at the bottom of my table. Would this be a correct format to write my loop to get the score averages. for(var x = 0; x < scores.length; x ++) { Sum = Sum + scores[x]; } average = Sum / scores.length; (I added this syntax to my code but it didn't show up). Thanks! – B.C Aug 16 '18 at 05:40
Update. I figured out that you used myjson.com to create an api. So I've already created my own api. The only problem that I am still having is how to write a loop to get the column average value. (i.e. games, fg%, etc...). If you have any knowledge on how this could be done it would be greatly appreciated. I tried the loop syntax that's written above but it was void. Thanks. – B.C Aug 16 '18 at 17:56
Ok, so, you're trying to sum all values from a column? You can do this by adding `if(key === column) { sum += obj[key]; }` inside `if (obj.hasOwnProperty(key)) {}` where `sum` is the sum of the values in the column and `column` is the name of the column (string). Then you can do something with sum. – JCAguilera Aug 17 '18 at 00:33
The problem arises because I'm trying to build a footer for my table through jquery. That might possibly be where I may be making the mistake. Is it necessary to create a footer class within this syntax for the sum section? – B.C Aug 17 '18 at 20:55
Well, you don't need a 'class', what I was trying to do is to use the same loop that we use to build the table body to do the sum. But, if you want you can use more code and do another loop just for building the footer. – JCAguilera Aug 20 '18 at 12:28
Also, sorry for the late responses – JCAguilera Aug 20 '18 at 12:31
I made a fiddle with the footer code. I styled the table a little bit, so you can see the result better (don't worry about styles and css, just focus on the javasript code). https://jsfiddle.net/JCAguilera/xpvt214o/644720/ – JCAguilera Aug 20 '18 at 13:30
1

No problem. I've been working on the table for some days now and had it figured out but my code was not well written. The example you have given is a much more well written code. Once again thank you very much for your help. It is greatly appreciated! Also I'm trying to understand the concept of coding and javascript a bit better. Are there any books or sites you could reference. I have already studied w3schools.com and codecademy but are there any sites that made the process easier for you to understand? Or will that just come with more time and practice? – B.C Aug 20 '18 at 18:41
I learned javascript from codecademy too! And yes time and practice are really important too. However I would recommend https://www.freecodecamp.org its really good and teaches you everything you need to know. – JCAguilera Aug 20 '18 at 20:03
Thanks. Last question. I tried to get the average of each column (just for fun so that I'd know how to do it in the future) by dividing the sum by 12, which is the total number of rows in each column. ret += (+sums[key] / 12).toFixed(1); Even though this gave me my desired results I wanted to know if I could / by rows.length? I replaced rows.length into the equation however it didn't work and when I went to console.log it stated my rows variable was not defined. I tried different methods which I thought would define the variable however none seemed to work. – B.C Aug 21 '18 at 06:04
Yes the `rows` variable is not defined, you can check the code and see that there's not any `rows` variable. Now the variable that you want is `data`, that's the array where you can get the length from. – JCAguilera Aug 21 '18 at 14:39

convert json to html table using jquery

1 Answers1