How do I do two api calls, receive the json then store this data in a local json file with a slightly different structure? (JavaScript)

Question

So just a little context first, I'm writing a small JS app that displays sports information. Basically I am working with an NBA api that has all teams and all players. What I'd like to do is periodically call the AllTeams and AllPlayers endpoints, receive the data, then store the data in a local JSON file.

At the moment the data from the AllTeams endpoint looks like:

And the player data looks like:

However in my local json file I'd like each team to have a key of "players" and then store the players from the AllPlayers endpoint according to team.id

Just to clarify I don't have a problem with doing the api calls etc the bit that I'm not sure how to do is set a structure for my json file and save the actual data from the two endpoints in that json file.

The structure I'd like is something like this:

Thanks, Bez

Can you provide a snippet of what your current code looks like? — jasper, Nov 14 '19 at 09:09
Actually I haven't started coding it yet as I don't know the correct approach. — Behzad Lashkari, Nov 14 '19 at 09:11
Why locally? If this is for a web page and you just want to store less than 10MB then you can do like `localStorage.players = JSON.stringify(obj);`. Get like `var obj = JSON.parse(localStorage.players);`. — StackSlave, Nov 14 '19 at 09:12
Does `allPlayers` contain a list of all players per team or ALL players in the competition? — jasper, Nov 14 '19 at 09:14
Hi, can you provide a small output on what "data structure" are you planning to have? I'm quite confused with ` each team to have a key of "players" and then store the players from the AllPlayers endpoint according to team.id` — I am L, Nov 14 '19 at 09:23
@StackSlave - that would mean a long page load the first time someone lands on the page right? — Behzad Lashkari, Nov 14 '19 at 09:30
@BehzadLashkari My example creates a json file with each team having a `player` attribute that contains all players for that team, how is this not what you're asking. — jasper, Nov 14 '19 at 09:35
@BehzadLashkari All good, just take a look at it. It should solve your problem. — jasper, Nov 14 '19 at 09:39
@BehzadLashkari Checkout my answer. Not sure if I got your question correctly tho. Kindly clarify If I did not so I can make adjustments — I am L, Nov 14 '19 at 09:56

score 1 · Accepted Answer · answered Nov 14 '19 at 09:55

Let's say you already have this data from api (and already parsed it so you only have the array data)

// data from api
const allTeams = [
    {
      id: 1,
      abbreviation: 'ATL',
      ... // other fields
    },
    {
      id: 2,
      abbreviation: 'BOS',
      ... // other fields
    },
]

// data from api
const players = [
  {
     id: 1,
     name: 'Buggy Sama',
     team: {
       id: 1,
       abbreviation: 'ATL'
       // other team fields
     }
     // other player fields
  }
]

To form the data you want, what you can do is insert every players inside the team via map:

const jsonPerTeam = allTeams.map(team => {
  const teamPlayers= {}

  // you can use any other loop functions here if you prefer that, 
  // but map is the fastest and just a personal preference
  players.map(player => {

    // if player's team is the same as the team, then store that player on player's key under teamPlayers
    if (player.team.id === team.id) {
      teamPlayers[player.id] = player;
    }
  })

   // add teamPlayers as players on your team
   return {
      ...team,
      players: teamPlayers
   }
});

^^ the code above will generate the structure that you want (based on the post).

To store the data you can check this answer

so you can do something like:

import fs from 'fs'

fs.writeFile("myLocalJsonTeam.json", jsonPerTeam , function(err) {
    if (err) {
        console.error(err);
    }
});

Kindly clarify if I understood your question correctly

jasper · Answer 2 · 2019-11-14T09:42:57.473

First of all, it seems like the allPlayers is paganized only returning 25 players at a time, I don't know if that amount is alterable but if it isn't make sure you loop through each page and push all players to a local variable.

var fs = require('fs');

let allPlayers = []; // Contains list of all players
const allTeams = []; // Contains list of all teams

const getAllTeamsWithPlayers = allTeams.map( team => {
  // Get a list of all players that play for the team
  const allPlayersForTeam = allPlayers.filter((player, index) => {
    // Check if this player plays for the team
    const playsForTeam = player.team.id == team.id;
    // If so, delete this player from the list (that way in next iteration it doesn't have to be looped over again)
    if (playsForTeam) allPlayers.splice(index, 1);
    return playsForTeam;
  });
 team.players = allPlayersForTeam;
 return team;
});

// Convert object to json
const allTeamsWithPlayersJSON = JSON.stringify(getAllTeamsWithPlayers());

fs.writeFile('myjsonfile.json', allTeamsWithPlayersJSON, 'utf8', console.log);

How do I do two api calls, receive the json then store this data in a local json file with a slightly different structure? (JavaScript)

2 Answers2