how to access multidimensional array in react

Question

I am trying to grab out the "teams" array and pull out data such as teamId, etc from it. I was wondering if any of you had any tips/help with this. I have used datas.map(data=>()) but it would not allow me to grab from teams, or maybe im doing it wrong and there is another way to map out a multidimensional array?

{
    "gameId": 3226262256,
    "platformId": "NA1",
    "gameCreation": 1575583791449,
    "gameDuration": 1526,
    "queueId": 400,
    "mapId": 11,
    "seasonId": 13,
    "gameVersion": "9.23.299.3089",
    "gameMode": "CLASSIC",
    "gameType": "MATCHED_GAME",
    "teams": [
        {
            "teamId": 100,
            "win": "Fail",
            "firstBlood": true,
            "firstTower": false,
            "firstInhibitor": false,
            "firstBaron": false,
            "firstDragon": false,
            "firstRiftHerald": false,
            "towerKills": 1,
            "inhibitorKills": 0,
            "baronKills": 0,
            "dragonKills": 2,
            "vilemawKills": 0,
            "riftHeraldKills": 0,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 111,
                    "pickTurn": 1
                },
                {
                    "championId": 25,
                    "pickTurn": 2
                },
                {
                    "championId": 24,
                    "pickTurn": 3
                },
                {
                    "championId": 235,
                    "pickTurn": 4
                },
                {
                    "championId": 238,
                    "pickTurn": 5
                }
            ]
        },
        {
            "teamId": 200,
            "win": "Win",
            "firstBlood": false,
            "firstTower": true,
            "firstInhibitor": true,
            "firstBaron": true,
            "firstDragon": true,
            "firstRiftHerald": true,
            "towerKills": 9,
            "inhibitorKills": 2,
            "baronKills": 1,
            "dragonKills": 1,
            "vilemawKills": 0,
            "riftHeraldKills": 1,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 266,
                    "pickTurn": 6
                },
                {
                    "championId": 89,
                    "pickTurn": 7
                },
                {
                    "championId": 64,
                    "pickTurn": 8
                },
                {
                    "championId": -1,
                    "pickTurn": 9
                },
                {
                    "championId": 141,
                    "pickTurn": 10
                }
            ]
        }
    ],

Then here is the code I am trying to use it in:

import React from 'react';
import './MatchHistory.css';
import Card from 'react-bootstrap/Card';

const MatchData = ({ datas }) => {


  return (
        <div>    
            <Card>
              <h5 className="card-title">Full Match data test Pull...</h5>
              <h5 className="card-title">Lane:{datas.platformId}</h5> 
              <h5 className="card-title">MapId:{datas.mapId}</h5>
              <h5 className="card-title">Mode: {datas.gameMode}</h5>
              <h5 className="card-title">Duration: {datas.gameDuration}</h5>
              <h5 className="card-title">SeasonId: {datas.seasonId}</h5>
              <h5 className="card-title">Version: {datas.gameVersion}</h5>
              <h5 className="card-title">Type: {datas.gameType}</h5>
              <h5 className="card-title">Team Data: players, bans, etc</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

      export default MatchData;

wentjun · Accepted Answer · 2019-12-24 02:23:00Z

1

There is generally nothing wrong with your code, and the way you are accessing the data to be rendered on your component. If you would like to iterate through teams and render it, it will not work if you do something like datas.map(data=>(...)), as this will iterate through the entire datas object.

Instead, what you should be doing is to do datas.team.map(data => ...), which will allow you to iterate through the values within team property using Array.map(), which works on arrays.

import React from 'react';
import './MatchHistory.css';
import Card from 'react-bootstrap/Card';

const MatchData = ({ datas }) => {


  return (
        <div>    
            <Card>
              <h5 className="card-title">Full Match data test Pull...</h5>
              <h5 className="card-title">Lane:{datas.platformId}</h5> 
              <h5 className="card-title">MapId:{datas.mapId}</h5>
              <h5 className="card-title">Mode: {datas.gameMode}</h5>
              <h5 className="card-title">Duration: {datas.gameDuration}</h5>
              <h5 className="card-title">SeasonId: {datas.seasonId}</h5>
              <h5 className="card-title">Version: {datas.gameVersion}</h5>
              <h5 className="card-title">Type: {datas.gameType}</h5>
              <h5 className="card-title">Team Data: {
                datas.team.map(data => {
                  return <div> 
                    // other properties and values within each object in `team`
                  <div>
                })
              }</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

export default MatchData;

answered Dec 24, 2019 at 2:23

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yer Over a year ago

Hi, when i try this, its giving me the error, cannot read 'map' of undefined. I know it exists in my array cause i have console.logged it but i cant figure out why its doing this

wentjun Over a year ago

@FaithElliott is datas asynchronous by any chance? Is it from some HTTP request?

symlink · Accepted Answer · 2019-12-24 02:34:55Z

const obj = {"gameId":3226262256,"platformId":"NA1","gameCreation":1575583791449,"gameDuration":1526,"queueId":400,"mapId":11,"seasonId":13,"gameVersion":"9.23.299.3089","gameMode":"CLASSIC","gameType":"MATCHED_GAME","teams":[{"teamId":100,"win":"Fail","firstBlood":true,"firstTower":false,"firstInhibitor":false,"firstBaron":false,"firstDragon":false,"firstRiftHerald":false,"towerKills":1,"inhibitorKills":0,"baronKills":0,"dragonKills":2,"vilemawKills":0,"riftHeraldKills":0,"dominionVictoryScore":0,"bans":[{"championId":111,"pickTurn":1},{"championId":25,"pickTurn":2},{"championId":24,"pickTurn":3},{"championId":235,"pickTurn":4},{"championId":238,"pickTurn":5}]},{"teamId":200,"win":"Win","firstBlood":false,"firstTower":true,"firstInhibitor":true,"firstBaron":true,"firstDragon":true,"firstRiftHerald":true,"towerKills":9,"inhibitorKills":2,"baronKills":1,"dragonKills":1,"vilemawKills":0,"riftHeraldKills":1,"dominionVictoryScore":0,"bans":[{"championId":266,"pickTurn":6},{"championId":89,"pickTurn":7},{"championId":64,"pickTurn":8},{"championId":-1,"pickTurn":9},{"championId":141,"pickTurn":10}]}]}

Array(obj).forEach(item => {
    item.teams.forEach(team => {
        console.log("Team ID: " + team.teamId, team)
    })
})

Alex · Accepted Answer · 2019-12-24 10:49:24Z

1

You have nested array

{
.
.
teams--
      |
      bans--
           | 
}

try this

 <h5 className="card-title">
    Team Data: players, bans, etc
    <ul>
      {datas.teams.map((team, i) => {
        return (
          <li key={i}>
            teamId:{team.teamId}//or other fields inside team
            <ul>
              {team.bans.map((ban, i) => {
                return <li key={i}>championId:{ban.championId}</li> //or other fields inside ban
              })}
            </ul>
          </li>
        );
      })}
    </ul>
  </h5>

Working Codesandbox sample

answered Dec 24, 2019 at 10:49

Alex

3,9911 gold badge20 silver badges27 bronze badges

Collectives™ on Stack Overflow

how to access multidimensional array in react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related