How to get fields from an array of objects?

Question

JavaScript

Hello, I'm new to JS, this might sound like a dumb question, but I'm stuck for a few days.
There's an array of English Premier League teams:

let teams = [
  {id: 1, team: 'Arsenal', palyed: 10, win: 5, loss: 3, draw: 2, goalsFor: 12, goalsAgainst: 13},
  {id: 2, team: 'Aston Villa', palyed: 10, win: 3, loss: 6, draw: 1, goalsFor: 14, goalsAgainst: 19},
  {id: 3, team: 'Burnley', palyed: 10, win: 1, loss: 5, draw: 4, goalsFor: 10, goalsAgainst: 16},
  {id: 4, team: 'Brighton', palyed: 10, win: 4, loss: 2, draw: 4, goalsFor: 11, goalsAgainst: 11},
  {id: 5, team: 'Brentford', palyed: 10, win: 3, loss: 4, draw: 3, goalsFor: 12, goalsAgainst: 12},
  {id: 6, team: 'Chelsea', palyed: 10, win: 8, loss: 1, draw: 1, goalsFor: 26, goalsAgainst: 3},
  {id: 7, team: 'Crystal Palace', palyed: 10, win: 2, loss: 2, draw: 6, goalsFor: 13, goalsAgainst: 14},
  {id: 8, team: 'Everton', palyed: 10, win: 4, loss: 4, draw: 2, goalsFor: 16, goalsAgainst: 16},
  {id: 9, team: 'Leeds Utd', palyed: 10, win: 2, loss: 4, draw: 4, goalsFor: 10, goalsAgainst: 17},
  {id: 10, team: 'Leicester City', palyed: 10, win: 4, loss: 4, draw: 2, goalsFor: 15, goalsAgainst: 17},
  {id: 11, team: 'Liverpool', palyed: 10, win: 6, loss: 0, draw: 4, goalsFor: 29, goalsAgainst: 8},
  {id: 12, team: 'Manchtester City', palyed: 10, win: 6, loss: 2, draw: 2, goalsFor: 20, goalsAgainst: 6},
  {id: 13, team: 'Manchester Utd', palyed: 10, win: 5, loss: 3, draw: 2, goalsFor: 19, goalsAgainst: 15},
  {id: 14, team: 'Newcastle Utd', palyed: 10, win: 0, loss: 6, draw: 4, goalsFor: 11, goalsAgainst: 23},
  {id: 15, team: 'Norvich City', palyed: 10, win: 0, loss: 8, draw: 2, goalsFor: 3, goalsAgainst: 25},
  {id: 16, team: 'Southampton', palyed: 10, win: 2, loss: 3, draw: 5, goalsFor: 9, goalsAgainst: 12},
  {id: 17, team: 'Tottenham', palyed: 10, win: 5, loss: 5, draw: 0, goalsFor: 9, goalsAgainst: 16},
  {id: 18, team: 'Watford', palyed: 10, win: 3, loss: 6, draw: 1, goalsFor: 12, goalsAgainst: 18},
  {id: 19, team: 'West Ham', palyed: 10, win: 6, loss: 2, draw: 2, goalsFor: 20, goalsAgainst: 11},
  {id: 20, team: 'Wolverhampton', palyed: 10, win: 5, loss: 4, draw: 1, goalsFor:11, goalsAgainst: 10},
];

I filled it in manually and sorted it, then through the API I get an array from the server:

fetch('https://app.sportdataapi.com/api/v1/soccer/standings?apikey&season_id=1980')
  .then((response) => {
    return response.json();
  })
  .then((result) => {
    console.log(result.data.standings);
  });

I get the following response (for each command):

[
    {
        "team_id": 2524,
        "position": 1,
        "points": 29,
        "status": "Promotion",
        "result": "Champions League",
        "overall": {
            "games_played": 12,
            "won": 9,
            "draw": 2,
            "lost": 1,
            "goals_diff": 26,
            "goals_scored": 30,
            "goals_against": 4
        },
        "home": {
            "games_played": 6,
            "won": 4,
            "draw": 1,
            "lost": 1,
            "goals_diff": 14,
            "goals_scored": 17,
            "goals_against": 3
        },
        "away": {
            "games_played": 6,
            "won": 5,
            "draw": 1,
            "lost": 0,
            "goals_diff": 12,
            "goals_scored": 13,
            "goals_against": 1
        }
    },
]

And since the commands have no names in the input array, but only id, I created an array with names and id:

let teamNames = [
  { id: 2522, name: 'Arsenal' },
  { id: 2520, name: 'Aston Villa' },
  { id: 2513, name: 'Burnley' }.........
];

The task is as follows: through the code, take the fields (keys) from the objects of the teams array, the names of the objects of the newTeams array, and through the code pass all this to the incoming array in fetch so that it has keys like my teams array but with its own values. I would be very grateful for any hint and help!

Answer 1

Instead of adding a third array, change the first one.

let teams = {
  2522: {id: 1, team: 'Arsenal', palyed: 10, win: 5, loss: 3, draw: 2, goalsFor: 12, goalsAgainst: 13},
  2520: {id: 2, team: 'Aston Villa', palyed: 10, win: 3, loss: 6, draw: 1, goalsFor: 14, goalsAgainst: 19},
}

Now, sorting through the data received from the api, you can easily get an object from your array.

const result = response.data.map(item => {
  return {
    ...item,
    ...teams[item.team_id]
  }
});

Answer 2

You can decide in different ways.
1) Transform data with keys as IDs and values
​​2) Iterate over teamNames and use the filter method to search for the desired element in the array. After changing it.
3) Iterate over 1 array and look for a match in 2m.