Using jQuery to get JSON Data

Question

I have a JSON response that shows like this:

{
  "gameId": 2540832082,
  "mapId": 12,
  "gameMode": "ARAM",
  "gameType": "MATCHED_GAME",
  "gameQueueConfigId": 65,
  "participants": [
    {
      "teamId": 100,
      "spell1Id": 32,
      "spell2Id": 7,
      "championId": 25,
      "profileIconId": 774,
      "summonerName": "MLG Elan",
      "bot": false,
      "summonerId": 77477471,
      "runes": [],
      "masteries": [
        {
          "rank": 5,
          "masteryId": 6111
        },
        {
          "rank": 1,
          "masteryId": 6122
        },
        {
          "rank": 2,
          "masteryId": 6131
        }
      ]
    },
    {
      "teamId": 100,
      "spell1Id": 4,
      "spell2Id": 32,
      "championId": 120,
      "profileIconId": 774,
      "summonerName": "Nuetzlich",
      "bot": false,
      "summonerId": 43800105,
      "runes": [
        {
          "count": 6,
          "runeId": 5245
        },
        {
          "count": 2,
          "runeId": 5335
        }
      ],
      "masteries": [
        {
          "rank": 3,
          "masteryId": 6114
        },
        {
          "rank": 5,
          "masteryId": 6312
        },
        {
          "rank": 1,
          "masteryId": 6322
        },
        {
          "rank": 5,
          "masteryId": 6331
        },
        {
          "rank": 1,
          "masteryId": 6343
        },
        {
          "rank": 5,
          "masteryId": 6351
        },
        {
          "rank": 1,
          "masteryId": 6362
        }
      ]
    },
    {
      "teamId": 100,
      "spell1Id": 13,
      "spell2Id": 7,
      "championId": 67,
      "profileIconId": 19,
      "summonerName": "Sonicmońgrel",
      "bot": false,
      "summonerId": 82267777,
      "runes": [
        {
          "count": 6,
          "runeId": 5245
        },
        {
          "count": 2,
          "runeId": 5335
        }
      ],
      "masteries": [
        {
          "rank": 5,
          "masteryId": 6312
        },
        {
          "rank": 1,
          "masteryId": 6323
        },
        {
          "rank": 5,
          "masteryId": 6331
        },
        {
          "rank": 1,
          "masteryId": 6343
        },
        {
          "rank": 4,
          "masteryId": 6351
        }
      ]
    },

I'm struggling to get the "summonerNames" for each player and display them on the site :(

What jQuery do I need?

This is what gets the data:

function getCurrentGame(summonerID) {
    $.ajax({
        url: "https://euw.api.pvp.net/observer-mode/rest/consumer/getSpectatorGameInfo/EUW1/" + summonerID + "?api_key=" + APIKEY,
        type: 'GET',
        dataType: 'json',
        data: {
        },

What do I need in here:

    success: function (resp) {


      }

To display the summoner names?

I have this in my HTML to simply build the list from the names:

Current Players (<span id="listPlayers"></span>)
<hr />
<span id="playerNames"></span>

Feel free to amend it in whatever way, I just really can't figure out how to list the player names :(

THANKS!!!

From that, you *should* be able to figure out how to access the rest — Derek Pollard, Feb 29 '16 at 15:28
ignore the fact that your data was json. once you decode the json, it's a javascript object/array structure, and you access things in it like any other object/array. — Marc B, Feb 29 '16 at 15:28

score 0 · Answer 1 · answered Feb 29 '16 at 15:30

0

Your whole JSON object is the resp.

Let's say you want to access "gameMode": "ARAM", it will be resp.gameMode.
Let's you want want to access "summonerName": "MLG Elan", it will be resp.participants.summonerName ( because summonerName is inside an array called participants )

answered Feb 29 '16 at 15:30

Jorel Amthor

1,264
13
38

I keep getting Origin XXXXXXX is not allowed by Access-Control-Allow-Origin – Inch High Feb 29 '16 at 16:50

score 0 · Answer 2 · answered Feb 29 '16 at 15:31

0

Try this

var obj = jQuery.parseJSON( resp );
alert( obj.participants[0].summonerName);

answered Feb 29 '16 at 15:31

Athanasios Kataras

25,191
4
32
61

Hey, wont that just display it in the console and not on the webpage? Thanks! :) Plus I keep getting Origin XXXXXXX is not allowed by Access-Control-Allow-Origin – Inch High Feb 29 '16 at 16:47
This looks unrelated. Are you making the request to another url? http://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error – Athanasios Kataras Feb 29 '16 at 16:56
Well I would presume the request is to an outside url as I'm using an API? I don't get why that is different though because the function uses data that is also generated from the same websites API. (E.g. Name to ID api request works but ID to current game API gives this error). Thankyou!! :) – Inch High Feb 29 '16 at 17:01

isvforall · Answer 3 · 2016-02-29T15:38:45.387

0

In your json data.participants is an array, you can use Array#map to get all names:

var names = data.participants.map(function(item) {
     return item.summonerName;    
});

You don't need jquery for that

edited Feb 29 '16 at 15:38

answered Feb 29 '16 at 15:32

isvforall

8,768
6
35
50

score 0 · Answer 4 · answered Feb 29 '16 at 15:47

0

JSON

var json = yourJSON;

JavaScript

var lenght = json.participants.length;
var summonerName = "";
for (i = 0; i < lenght ; i++){
  summonerName += json.participants[i].summonerName.toString() + ", ";
}
document.getElementById("playerNames").innerText = summonerName;

HTML

<span id="playerNames"></span>

answered Feb 29 '16 at 15:47

Leonardo Lima

130
10

I've tried this, console presents: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The data returned is from an API, I can confirm the API is working because it sends a request off to find the ID before using the ID in the above function. (If that makes sense). – Inch High Feb 29 '16 at 16:28
PS - I've changed to jsonp in the "Get" area, now I get: Uncaught SyntaxError: Unexpected token : – Inch High Feb 29 '16 at 16:33
I think you need to enable CORS in the configuration of the API. Look at this other problem. @apsillers explains how to get it working http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – Leonardo Lima Feb 29 '16 at 17:14
I still don't get why I'm able to access the data in function A, but can't access it in function B? Its the same web api, however function B uses the ID passed it from function A, would that make a difference? – Inch High Feb 29 '16 at 17:28

score 0 · Answer 5 · answered Feb 29 '16 at 16:24

0

The resp parameter is a JavaScript object created by the returned Json. summonerName is an attribute of each participant and participants is an array of objects. So you need to iterate through the participants array and get the name for each participant. Try something like this

  success: function (resp) {
    var participants = resp.participants,
        names = "",
        spanElement = document.getElementById("playerNames");

     participants.forEach(function(part){
       names = names + part.summonerName + " ";
     }

     spanElement.innerText = names ;
  }

answered Feb 29 '16 at 16:24

Roumelis George

6,602
2
16
31

I keep receiving; I keep getting Origin XXXXXXX is not allowed by Access-Control-Allow-Origin no matter what approach I try. – Inch High Feb 29 '16 at 16:50
Looks like the api you try to use has not set header Access-Control-Allow-Origin: *. Try using a proxy like this url: "https://jsonp.afeld.me/?url=https://euw.api.pvp.net/observer-mode/rest/consumer/getSpectatorGameInfo/EUW1/" + summonerID + "?api_key=" + APIKEY – Roumelis George Mar 01 '16 at 08:06

Using jQuery to get JSON Data

5 Answers5