how to create jquery variables from json file?

Question

Any help is very much appreciated.

Basically I am using an api from mashape, but I'm a bit of a newbie to JSON files.

What I want to do is create a load of jquery variables for each teams total points.

Bare in mind that the teams change position in the JSON file depending on their position in the table.

Below is my jquery code so far (without the auth code) and the JSON file.

$.ajax({
url: 'https://heisenbug-premier-league-live-scores-v1.p.mashape.com/api/premierleague/table',
type: 'GET',
data: {},
dataType: 'json',
success: function(data) { 
  $(data.records).each(function(index, value) {



  });

  console.dir((data.source)); 
},
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization", 
"Auth Code");
}
});

And the JSON file.

{
"records": [
{
  "team": "Manchester City",
  "played": 10,
  "win": 8,
  "draw": 0,
  "loss": 2,
  "goalsFor": 29,
  "goalsAgainst": 12,
  "points": 24
},
{
  "team": "Arsenal",
  "played": 10,
  "win": 7,
  "draw": 2,
  "loss": 1,
  "goalsFor": 16,
  "goalsAgainst": 6,
  "points": 23
},
{
  "team": "Tottenham",
  "played": 10,
  "win": 5,
  "draw": 4,
  "loss": 1,
  "goalsFor": 18,
  "goalsAgainst": 7,
  "points": 19
},
{
  "team": "Leicester",
  "played": 10,
  "win": 5,
  "draw": 4,
  "loss": 1,
  "goalsFor": 16,
  "goalsAgainst": 13,
  "points": 19
},
{
  "team": "Manchester United",
  "played": 10,
  "win": 5,
  "draw": 4,
  "loss": 1,
  "goalsFor": 12,
  "goalsAgainst": 4,
  "points": 19
},
{
  "team": "West Ham",
  "played": 10,
  "win": 4,
  "draw": 4,
  "loss": 2,
  "goalsFor": 16,
  "goalsAgainst": 12,
  "points": 16
},
{
  "team": "Liverpool",
  "played": 9,
  "win": 4,
  "draw": 3,
  "loss": 2,
  "goalsFor": 11,
  "goalsAgainst": 11,
  "points": 15
},
{
  "team": "Norwich",
  "played": 10,
  "win": 4,
  "draw": 3,
  "loss": 3,
  "goalsFor": 12,
  "goalsAgainst": 10,
  "points": 15
},
{
  "team": "Southampton",
  "played": 10,
  "win": 4,
  "draw": 2,
  "loss": 4,
  "goalsFor": 17,
  "goalsAgainst": 13,
  "points": 14
},
{
  "team": "Chelsea",
  "played": 10,
  "win": 4,
  "draw": 2,
  "loss": 4,
  "goalsFor": 15,
  "goalsAgainst": 14,
  "points": 14
},
{
  "team": "West Bromwich Albion",
  "played": 11,
  "win": 4,
  "draw": 2,
  "loss": 5,
  "goalsFor": 14,
  "goalsAgainst": 17,
  "points": 14
},
{
  "team": "Crystal Palace",
  "played": 11,
  "win": 4,
  "draw": 2,
  "loss": 5,
  "goalsFor": 12,
  "goalsAgainst": 12,
  "points": 14
},
{
  "team": "Watford",
  "played": 11,
  "win": 4,
  "draw": 2,
  "loss": 5,
  "goalsFor": 11,
  "goalsAgainst": 10,
  "points": 14
},
{
  "team": "Stoke",
  "played": 9,
  "win": 4,
  "draw": 1,
  "loss": 4,
  "goalsFor": 10,
  "goalsAgainst": 9,
  "points": 13
},
{
  "team": "Swansea",
  "played": 10,
  "win": 3,
  "draw": 4,
  "loss": 3,
  "goalsFor": 9,
  "goalsAgainst": 12,
  "points": 13
},
{
  "team": "Everton",
  "played": 11,
  "win": 3,
  "draw": 4,
  "loss": 4,
  "goalsFor": 23,
  "goalsAgainst": 20,
  "points": 13
},
{
  "team": "Sunderland",
  "played": 10,
  "win": 3,
  "draw": 2,
  "loss": 5,
  "goalsFor": 12,
  "goalsAgainst": 11,
  "points": 11
},
{
  "team": "Bournemouth",
  "played": 9,
  "win": 2,
  "draw": 4,
  "loss": 3,
  "goalsFor": 10,
  "goalsAgainst": 13,
  "points": 10
},
{
  "team": "Newcastle United",
  "played": 10,
  "win": 2,
  "draw": 4,
  "loss": 4,
  "goalsFor": 14,
  "goalsAgainst": 14,
  "points": 10
},
{
  "team": "Aston Villa",
  "played": 9,
  "win": 0,
  "draw": 3,
  "loss": 6,
  "goalsFor": 6,
  "goalsAgainst": 13,
  "points": 3
}
]
}

Thank You Very Much!

what do you mean by jquery variable? can't you just use the parsed json? — Amin Jafari, Aug 23 '17 at 23:05
Hard to understand what your trying to do here, are you wanting to display this data using jquery, so that it appears like a league table..? — Keith, Aug 23 '17 at 23:07
There is no such thing as a ”jQuery variable”. Maybe you mean something like ”use jQuery to fetch data from a JSON and store it in a variable”? — Daniel Hallgren, Aug 23 '17 at 23:07
You can accept one answer (if it helps you) by click on big gray check button on its left side. If you wish you can add +10 points to any author of any good answer by click upper gray triangle — Kamil Kiełczewski, Feb 06 '19 at 21:36

score 0 · Answer 1 · answered Aug 24 '17 at 00:08

To create an object and add the total points for each team, you'll need to create a map (key/value) where the key is each team's name and the value is the total points for each team.

I'm hosting your data on MyJSON.

Here's a function that retrieves the data from the remote server, and initializes an object containing the total points for each team:

function getData() {
  // https://api.myjson.com/bins/1c6utx
  var teamScores = {};

  $.get("https://api.myjson.com/bins/1c6utx", function(data, status){
    $.each(data.records, function(index, value) {
      if (!teamScores[value.team]) {
        teamScores[value.team] = 0;
      }

      teamScores[value.team] += value.points;
    });

    console.log(JSON.stringify(teamScores));
  });
}

/* Output:
{"Manchester City":24,"Arsenal":23,"Tottenham":19,"Leicester":19,"Manchester United":19,"West Ham":16,"Liverpool":15,"Norwich":15,"Southampton":14,"Chelsea":14,"West Bromwich Albion":14,"Crystal Palace":14,"Watford":14,"Stoke":13,"Swansea":13,"Everton":13,"Sunderland":11,"Bournemouth":10,"Newcastle United":10,"Aston Villa":3}
*/

You can check this fiddle to see it in action. Hope this helps!

Thankyou for your help, sorry for being a pain but how would I then create variables named after the teams, that are equal to their total points? — Brandon Roberts, Aug 24 '17 at 08:45
@BrandonRoberts The object `teamScores` will contain an attribute for each teach with its value being the total points for each individual team. So if you do `teamScores['Manchester City']`, for example, you will get the total points for that team. Not sure exactly what you mean... Are you trying to define a variable for each team? Is the list of teams fixed? — M3talM0nk3y, Aug 24 '17 at 13:48

how to create jquery variables from json file?

1 Answers1