-2

I am new to JSON and am having difficulties with displaying data on a webpage using getJSON for a university assignment. I have tried a loop to append table rows but am a bit unclear how to use the data that is returned from the JSON file.

Here is what I tried to get working:

<body>
    <table>
    <tr>
        <th>year</th>
        <th>sem</th>
        <th>module</th>
        <th>crn</th>
        <th>title</th>
        <th>credits</th>
         <th>level</th>
         <th>coordinator</th>
    </tr>
</table>
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $.getJSON('modules.json', function(data) {
      console.log(data);
      var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].year + "</td>");
            tr.append("<td>" + data[i].sem + "</td>");
            tr.append("<td>" + data[i].module + "</td>");
            tr.append("<td>" + data[i].crn + "</td>");
            tr.append("<td>" + data[i].title + "</td>");
            tr.append("<td>" + data[i].credits + "</td>");
            tr.append("<td>" + data[i].level + "</td>");
            tr.append("<td>" + data[i].coordinator + "</td>");

            $('table').append(tr);

            }
      });
    </script>
</body>

When inspecting get response I can see that the JSON data has successfully been returned but despite trying to implement many examples I have not been able to display it in a table. My understanding is that it's along the lines of appending rows in a loop but I just can't seem to get any table output no matter what I try. My webpage right now just shows the table headers.

Here is a look at my json file:

{ "modules":[
    {
        "year": 2,
        "sem": 1,
        "module": "COM145",
        "crn": 1865,
        "title": "Content Authoring",
        "credits": 10,
        "level": 5,
        "coordinator": "Clarke Kent"
    },
    {
        "year": 1,
        "sem": 3,
        "module": "COM1333",
        "crn": 2763,
        "title": "Acad Study Skills for M'Media",
        "credits": 10,
        "level": 5,
        "coordinator": "Bruce Wayne"
     }
]}

Thanks

t.niese
  • 39,256
  • 9
  • 74
  • 101
Jordan96
  • 1
  • 2
  • What have you tried so far? I'm not one to do someone's university assignment for them, but i will help by pointing you in the right direction. – Pedro Estrada Oct 22 '17 at 01:18
  • If you don't use `data` in you `function(data)`, what do you think you should got as result? –  Oct 22 '17 at 01:18
  • Please search before asking: https://stackoverflow.com/questions/19901843/display-json-data-in-html-table, https://stackoverflow.com/questions/18395976/how-to-display-a-json-array-in-table-format, etc. – MewX Oct 22 '17 at 01:20
  • @Pedro Estrada thanks, I edited my post to add in what I tried to get working. – Jordan96 Oct 22 '17 at 13:13
  • 1
    Possible duplicate of [Display JSON Data in HTML Table](https://stackoverflow.com/questions/19901843/display-json-data-in-html-table) – Jayakrishnan Oct 22 '17 at 14:03

2 Answers2

0

Check where your have done mistake,

$.getJSON('modules.json', function(data) {
        var tr;
        for (var i = 0; i <data.modules.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data.modules[i].year + "</td>");
            tr.append("<td>" + data.modules[i].sem + "</td>");
            tr.append("<td>" + data.modules[i].module + "</td>");
            tr.append("<td>" + data.modules[i].crn + "</td>");
            tr.append("<td>" + data.modules[i].title + "</td>");
            tr.append("<td>" + data.modules[i].credits + "</td>");
            tr.append("<td>" + data.modules[i].level + "</td>");
            tr.append("<td>" + data.modules[i].coordinator + "</td>");

            $('table').append(tr);

            }

      });

Check this method also by jquery.each method

$.getJSON('modules.json', function(data) { 
        $.each(data.modules, function(index, val) {
            tr = $('<tr/>');
            tr.append("<td>" + val.year + "</td>");
            tr.append("<td>" + val.sem + "</td>");
            tr.append("<td>" + val.module + "</td>");
            tr.append("<td>" + val.crn + "</td>");
            tr.append("<td>" + val.title + "</td>");
            tr.append("<td>" + val.credits + "</td>");
            tr.append("<td>" + val.level + "</td>");
            tr.append("<td>" + val.coordinator + "</td>");    
            $('table').append(tr);
        });

      });
jvk
  • 2,133
  • 3
  • 19
  • 28
0

Ok so I got this sorted. The "modules" title at the start of my JSON file had been causing problems and I would get an empty value when trying to output any value of an array. I just got rid of it, went down to one array object and I could output data.value once again.

Jordan96
  • 1
  • 2