Having Trouble Displaying JSON Array Data

Question

I have been trying to access and display this data on a table in HTML for a few hours now and have gotten nowhere. I have used the $.each function but i believe I am somehow calling the data wrong please correct me if i am wrong The JSON data is laid out like this:

[
  {
    "id": "8ef2d135-73a3-4a58-8858-733f3882290a",
    "userid": "8ef2d135-73a3-4a58-8858-733f3882290a",
    "name": "MN-Carven",
    "placement": 1,
    "platform": "PC",
    "value": 66.29059172668
  },
  {
    "id": "b5af3e4f-8c43-48e4-8d04-e8adf0ae9808",
    "userid": "b5af3e4f-8c43-48e4-8d04-e8adf0ae9808",
    "name": "Tchanos.MTLK",
    "placement": 2,
    "platform": "PC",
    "value": 65.32935808926
  },
  {
    "id": "ee2fcc61-a8d9-4b57-8837-297ace438e3e",
    "userid": "ee2fcc61-a8d9-4b57-8837-297ace438e3e",
    "name": "Lion__.",
    "placement": 3,
    "platform": "PC",
    "value": 57.44590079297
  }
]

It is my understanding that i can access an array by using a $.each function in javascript. I will post my javascript below. I am wanting to display multiple categories I.E: id, name, value etc..

$(function() {
  var aliases = [];
  $.getJSON('leaderboard.json', function(data) {
    $.each(data.aliases, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "<td>" + f.placement + "</td>" + "</tr>"
      $(tblRow).appendTo("#leaderboard tbody");
    });
  });
});

Here is the HTML for the table:

<table id="leaderboard">
  <thead>
    <tr>
      <th>Username</th>
      <th>Place</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">
      </td>
    </tr>
  </tfoot>
</table>

I was so sure that I had been correct in using $.each, but i believe i need some further guidance, any links to docs relating to my problems are welcome, thank you.

What is the resulting HTML when you run the jQuery code? How do you want it to be different? — Code-Apprentice
– Code-Apprentice, Commented Apr 27, 2018 at 15:19
what do you mean by "calling the data wrong"? what specifically is the part that's not working? are there any errors in your browser console? have you tried calling console.log(data); inside your getJSON callback? — Dan O
– Dan O, Commented Apr 27, 2018 at 15:21
the result is nothing, it is almost as if it is broken, I think that i may be using my javascript wrong. — Austin Leath
– Austin Leath, Commented Apr 27, 2018 at 15:21
Does your JSON look like this {"aliases": [..array]}? because that's how you access it. — jcubic
– jcubic, Commented Apr 27, 2018 at 15:23
Cannot reproduce, you need to log what data is and see if you have any errors (press F12 in the browser to open developer tools). — HMR
– HMR, Commented Apr 27, 2018 at 15:25

Travis Tillotson · Accepted Answer · 2018-04-27 16:02:53Z

1

Part of the problem is that you're trying to iterate over data.aliases, but aliases is not a part of the data object. Also, take a look at the reduce function for building your table body string. I think what you're looking for here could be accomplished with:

$.getJSON('leaderboard.json', (data) => {
    const tableData = data.reduce((pre, curr) => {
      return pre + `<tr><td>${curr.name}</td><td>${curr.placement}</td></tr>`;
    }, '');

    $(tableData).appendTo('#leaderboard tbody');
  });

answered Apr 27, 2018 at 16:02

Travis Tillotson

212 bronze badges

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

2 Comments

Austin Leath Over a year ago

Thank you, i will give this a try.

Austin Leath Over a year ago

this works!! thank you sir! I will be reading up on the 'reduce' function.

Austin Leath · Accepted Answer · 2018-04-27 17:04:29Z

0

SOLVED

The problem was my JQuery

Here is how this is solved:

$.getJSON('leaderboard.json', (data) => {
const tableData = data.reduce((pre, curr) => {
  return pre + `<tr><td>${curr.name}</td><td>${curr.placement}</td></tr>`;
}, '');

$(tableData).appendTo('#leaderboard tbody');
});

answered Apr 27, 2018 at 17:04

Austin Leath

681 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Having Trouble Displaying JSON Array Data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related