Parse JSON from url to use in html

Question

i have a json file in an url that appears like this

[{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124",    "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank":"II","veteran":true,"inactive":false,"freshBlood":false,"hotStreak":false},
{"tier":"BRONZE","leagueName":"Kennen's Adventurers","queueType":"RANKED_FLEX_SR","playerOrTeamId":"91248124",    "playerOrTeamName":"NunoC99","leaguePoints":2,"wins":28,"losses":41,"rank":"III","veteran":false,"inactive":false,"freshBlood":false,"hotStreak":false}]7

I want to parse it, either through javascript and use it to display the tier, rank and leaguepoints in html. I'm new at this, and I cant figure out how to parse the json into usable variables to display in the html file. please help if u can.

*`i have a json file ... I want to parse it`* - use `JSON.parse` — Jaromanda X, Sep 21 '17 at 01:52

score 1 · Answer 1 · answered Sep 21 '17 at 02:46

1

You can use jquery to get the json from url

$.getJSON('http://myurl', function(data) {
   for(var i = 0, len = data.length; i < len; i++) {
      var obj = data[i];
      //obj will be your item with obj.tier, obj.leagueName etc.
   }
});

answered Sep 21 '17 at 02:46

Jean Robert

749
1
7
20

score 0 · Accepted Answer · answered Sep 21 '17 at 01:53

Refer to the question How to get JSON from URL in Javascript for accessing the data from the URL. Then you can iterate through the data with a loop:

var data = [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124",    "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank":"II","veteran":true,"inactive":false,"freshBlood":false,"hotStreak":false}, {"tier":"BRONZE","leagueName":"Kennen's Adventurers","queueType":"RANKED_FLEX_SR","playerOrTeamId":"91248124",    "playerOrTeamName":"NunoC99","leaguePoints":2,"wins":28,"losses":41,"rank":"III","veteran":false,"inactive":false,"freshBlood":false,"hotStreak":false}]

for (var i = 0; i < data.length; i++) {
  // Within the loop you can access each field of each object
  // as shown below
  // data[i].tier
  // data[i].leagueName
  // data[i].queueType
  // data[i].playerOrTeamId
  // data[i].leaguePoints
  // data[i].wins
  // data[i].losses
  // data[i].rank
  // data[i].veteran
  // data[i].freshBlood
  // data[i].hotStreak
  // data[i].inactive
}

You can use methods like document.createElement("TAG_NAME") and document.appendChild(childElement) to insert the data into an HTML document.

hi, i tried to do what u said using document.createElement and I've come up with this https://jsfiddle.net/deL0hv2d/. i implemented in a script in the html file, but it doesnt work. Can u take a look and see if there's a problem with the code? — Nuno Costa, Sep 21 '17 at 10:21
See if this will help you: https://jsfiddle.net/6om52f9y/ Two issues with your code was that it looked like you were trying to pass two success functions into $.getJSON, when it only takes one and in the first function you never use the data in the loop beyond assigning it to a variable that gets overridden with each iteration. If this has helped you, please consider marking my post as the answer. — Lucas Schneider, Sep 21 '17 at 15:29

Parse JSON from url to use in html

2 Answers2