Looping Through and Displaying Deeply Nested Objects/JSON with React

Question

I'm making an API request and running the data through groupBy and sortBy to get a slightly more structured object. Then I save it to the state.

useEffect(() => {
        const fetchTeamData = async () => {
            const result = await axios(
              `https://example.com/api-call`,
            ).then((result) => {
                let teams = _.groupBy(_.sortBy(result.data.results, "season"), "player_profile.team");
                setTeamInfo(teams);
            });
          };
          fetchTeamAffinityData(); 
      }, []);

This gives me an object similar to:

{
    Angels: [
        0: {
            player_profile:{
                name: "John Doe",
                number: "10"
            },
            season: 1
        },
        1: {
            player_profile:{
                name: "Mike Trout",
                number: "21"
            },
            season: 2
        }
    ],
    Diamondbacks: [
        0: {
            player_profile:{
                name: "Randy Johnson",
                number: "51"
            },
            season: 1
        },
        1: {
            player_profile:{
                name: "Brandon Webb",
                number: "16"
            },
            season: 2
        }
    ],
}

This is the output I'm looking for:

Team: Angels
Player 1: John Doe
Player 1 Number: 10
Player 2: Mike Trout
Player 2 Number: 21

Team: Diamondbacks
Player 1: Randy Johnson
Player 1 Number: 51
Player 2: Bradon Webb
Player 2 Number: 17

Here is what I've tried, which gives me a loop of the team names. But since I'm mapping the object keys, I lose the actual data for the nested object.

{Object.keys(teamAffinityInfo?? "").map((team, index) => (
    Team: {team}
))}

How can I work with deeply nested objects in a sensible way?

Have you already tried with Object.entries? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Ogod
– Ogod, Commented May 25, 2021 at 7:30

Azle Blade · Accepted Answer · 2021-05-25 08:01:56Z

Based on your approach, you could store Object.keys() and then iterate on those keys to implement your logic.

JS

const teams = Object.keys(object1)

teams.forEach(team => {
   const playerProfiles = Object1[team]

   playerProfiles.forEach(p => {
      // Your logic here
   })

})

Better approach would be to use Object.entries() as mentioned by Ogod in the comment.

JS

const object1 = {
    Angels: [
        {
            player_profile:{
                name: "John Doe",
                number: "10"
            },
            season: 1
        },
        {
            player_profile:{
                name: "Mike Trout",
                number: "21"
            },
            season: 2
        }
    ],
    Diamondbacks: [
        {
            player_profile:{
                name: "Randy Johnson",
                number: "51"
            },
            season: 1
        },
        {
            player_profile:{
                name: "Brandon Webb",
                number: "16"
            },
            season: 2
        }
    ],
}


for (const [key, value] of Object.entries(object1)) {
  const players = value
  console.log("Team", key)
  players.forEach((p,i) => {
    console.log("Player",i, ":", p.player_profile.name) 
    console.log("Player",i, "Number :", p.player_profile.number) 
  })
}

Note: I slightly changed the structure of object, by removing the index in the profiles array.

vincent · Accepted Answer · 2022-06-13 17:45:39Z

Here is an iterative solution using object-scan

.as-console-wrapper {max-height: 100% !important; top: 0}

<script type="module">
import objectScan from 'https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js';

const myData = { Angels: [ { player_profile: { name: "John Doe", number: "10" }, season: 1 }, { player_profile: { name: "Mike Trout", number: "21" }, season: 2 } ], Diamondbacks: [ { player_profile: { name: "Randy Johnson", number: "51" }, season: 1 }, { player_profile: { name: "Brandon Webb", number: "16" }, season: 2 } ], };

const extract = (data) => {
  const logic = {
    '*': ({ key }) => `Team: ${key[0]}`,
    '*[*].player_profile.name': ({ key, value }) => `Player ${key[1] + 1}: ${value}`,
    '*[*].player_profile.number': ({ key, value }) => `Player ${key[1] + 1} Number: ${value}`
  }
  return objectScan(Object.keys(logic), {
    breakFn: ({ context, matchedBy, key, value }) => {
      context.push(...matchedBy.map((m) => logic[m]({ key, value })))
    },
    reverse: false
  })(data, []);
}

console.log(extract(myData).join('\n'));
/* =>
Team: Angels
Player 1: John Doe
Player 1 Number: 10
Player 2: Mike Trout
Player 2 Number: 21

Team: Diamondbacks
Player 1: Randy Johnson
Player 1 Number: 51
Player 2: Brandon Webb
Player 2 Number: 16
*/
</script>

Disclaimer: I'm the author of object-scan

Collectives™ on Stack Overflow

Looping Through and Displaying Deeply Nested Objects/JSON with React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related