Build an object off a deepley nested array

Question

The data userFavSportData provided by the server is comprised of the various props:

[{
  "sport": 1,
  "favorites": [{
    "teams": [{
      "id": 123,
      "name_eng": "Mozambique",
      "name_rus": "Мозамбик",
      "short_name_eng": "Mozambique",
      "short_name_rus": "Мозамбик",
      "country": {
        "name_eng": "Mozambique",
        "name_rus": "Мозамбик"
      }
    }]
  }]
}, {
  "sport": 3,
  "favorites": [{
    "teams": [{
      "id": 2,
      "name_eng": "Golden State Warriors",
      "name_rus": "Голден Стэйт Уорриорз",
      "short_name_eng": "Warriors",
      "short_name_rus": "Уорриорз",
      "country": {
        "name_eng": "United States",
        "name_rus": "США"
      }
    }],
    "players": [{
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "Spartak Moscow",
        "name_rus": "Спартак Москва"
      }
    }, {
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "CSKA Moskva",
        "name_rus": "ЦСКА Москва"
      }
    }, {
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "Golden State Warriors",
        "name_rus": "Голден Стэйт Уорриорз"
      }
    }]
  }]
}]

How do I map that data to an object comprised of the sport and teams props? Same with the players prop. Both teams and players might be missing in the server data.

I could store the teams prop data for the entire server response array in a variable with

const teams: Teams = []

userFavSportData.forEach((a) => a.favorites
    .forEach((f) => f.teams?.forEach((t) => teams.push(t))))

but couldn't store all the sport and teams server data props in an array of same objects that contains sport and teams for each go. How do I do that? Is it possible to do so in one map on the server data array?

Desired output:

[
  {
    sport: 1,
    country: Object,
    id: 123,
    name_eng: "Mozambique", 
    name_rus: "Мозамбик",
​​    short_name_eng: "Mozambique",
    short_name_rus: "Мозамбик",
  },
  ... ...
]

Answer 1

Got it with reduce function.

const userFavSportData = [{
  "sport": 1,
  "favorites": [{
    "teams": [{
      "id": 123,
      "name_eng": "Mozambique",
      "name_rus": "Мозамбик",
      "short_name_eng": "Mozambique",
      "short_name_rus": "Мозамбик",
      "country": {
        "name_eng": "Mozambique",
        "name_rus": "Мозамбик"
      }
    }]
  }]
}, {
  "sport": 3,
  "favorites": [{
    "teams": [{
      "id": 2,
      "name_eng": "Golden State Warriors",
      "name_rus": "Голден Стэйт Уорриорз",
      "short_name_eng": "Warriors",
      "short_name_rus": "Уорриорз",
      "country": {
        "name_eng": "United States",
        "name_rus": "США"
      }
    }],
    "players": [{
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "Spartak Moscow",
        "name_rus": "Спартак Москва"
      }
    }, {
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "CSKA Moskva",
        "name_rus": "ЦСКА Москва"
      }
    }, {
      "id": 11,
      "firstname_eng": "Stephen",
      "lastname_eng": "Curry",
      "firstname_rus": "Стефен",
      "lastname_rus": "Карри",
      "team": {
        "name_eng": "Golden State Warriors",
        "name_rus": "Голден Стэйт Уорриорз"
      }
    }]
  }]
}]

var data = userFavSportData.reduce((array, item) => {
  var teams = item.favorites.map(item => item.teams?.map(item => item))[0][0]
  if (teams) array.push({sport: item.sport, ...teams})
  return array
}, [])
console.log(data)

Hope that helps.

Answer 2

In your code, just added the sport from a object.

const data = [
  {
    sport: 1,
    favorites: [
      {
        teams: [
          {
            id: 123,
            name_eng: "Mozambique",
            name_rus: "Мозамбик",
            short_name_eng: "Mozambique",
            short_name_rus: "Мозамбик",
            country: {
              name_eng: "Mozambique",
              name_rus: "Мозамбик",
            },
          },
        ],
      },
    ],
  },
  {
    sport: 3,
    favorites: [
      {
        teams: [
          {
            id: 2,
            name_eng: "Golden State Warriors",
            name_rus: "Голден Стэйт Уорриорз",
            short_name_eng: "Warriors",
            short_name_rus: "Уорриорз",
            country: {
              name_eng: "United States",
              name_rus: "США",
            },
          },
        ],
        players: [
          {
            id: 11,
            firstname_eng: "Stephen",
            lastname_eng: "Curry",
            firstname_rus: "Стефен",
            lastname_rus: "Карри",
            team: {
              name_eng: "Spartak Moscow",
              name_rus: "Спартак Москва",
            },
          },
          {
            id: 11,
            firstname_eng: "Stephen",
            lastname_eng: "Curry",
            firstname_rus: "Стефен",
            lastname_rus: "Карри",
            team: {
              name_eng: "CSKA Moskva",
              name_rus: "ЦСКА Москва",
            },
          },
          {
            id: 11,
            firstname_eng: "Stephen",
            lastname_eng: "Curry",
            firstname_rus: "Стефен",
            lastname_rus: "Карри",
            team: {
              name_eng: "Golden State Warriors",
              name_rus: "Голден Стэйт Уорриорз",
            },
          },
        ],
      },
    ],
  },
];

const teams = [];

data.forEach((a) =>
  a.favorites.forEach((f) =>
    f.teams?.forEach((t) => teams.push({ ...t, sport: a.sport }))
  )
);

console.log(teams);