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!

Answer 1

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!