CODEWITHSUNDEEP
javascriptjsonreactjs
Tequila
Tequila

Reputation: 256

How would I "Map" through Nested Json

I have nested Json file, and I was wondering how would I call the image, price and name from freetoplay object in Json so it renders the data from the object and then displays it, I have already tried something, but it does not work clearly, so I came here. I would like some help. Thanks in


import React from 'react'
import data from "./data.json";
import {Link} from "react-router-dom";

function FreeToPlay() {
    return (
        <>
          <div className='All' >
            {data[0].games.freetoplay.map((games) => {
              return (
                <div className='f2p' key={games.freetoplay.id}>               
                    <img src={games.freetoplay.image}></img>
                    <h2>{games.freetoplay.name}</h2>
                    <h5>{games.freetoplay.price}</h5>                               
         <Link  className='link' to={`/payment/${games.id}`}>
           Buy Now
          </Link> 
        </div>
              );
            })}
          </div>
        </>
      );
}

[
  {
    "games":[{
    "freetoplay": [{
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "CS Go"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "Fifa"
      }
    ],
    
      "action": [{
          "id": "2",
          "image": "src=fsdf",
          "price": "60$",
          "name": "doom"
        },
        {
          "id": "3",
          "image": "src=fsdf",
          "price": "66$",
          "name": "cyberpunk"
        }
      ],
      "adventure": [
        {
          "id": "4",
          "image": "src=fsdf",
          "price": "60$",
          "name": "indiana "
        },
        {
          "id": "5",
          "image": "src=fsdf",
          "price": "43$",
          "name": "torchlight"
        }
      ]
    }]
    }
  ]

Upvotes: 0

Views: 1584

Answers (2)

MuhammadUsmanAslam
MuhammadUsmanAslam

Reputation: 26

You need map() twice through this kind of objects

{
    data[0].games.map((game_cat) => {
        return(
            game_cat.map((game) => {
                return ( 
                    <div className='f2p' key={game.id}>
                       <img src={game.image}></img>
                       <h2>{game.name}</h2>
                       <h5>{game.price}</h5>
                    </div>
                )
            })
        )
    })
}

Upvotes: 1

Elmaz Feratovic
Elmaz Feratovic

Reputation: 76

You already got data from freetoplay in games. Just call it by fieldname

<h2>{games.freetoplay.name}</h2>
<h5>{games.freetoplay.price}</h5>

Change this into

<h2>{games.name}</h2>
<h5>{games.price}</h5>

Upvotes: 1

Related Questions