Nested JSON – Retrieve a paramater using React

November 15, 2023

Trying to retrieve parameters such as description, or bannerUrl, but to no avail. Any suggestions? Nothing seems to output…

How can get get those values?

I have tried the below, but no luck:

import games from "../JSON/US.en.json";

{games.map((value,key)=>
                       <div>{value.description}</div>
        )}

[
{
    "70010000000025": {
        "**bannerUrl**": "xxxx",
        "category": [
            "Adventure",
            "Action",
            "RPG",
            "Other"
        ],
        "**description**": "xxxx",
        "developer": null,
        "frontBoxArt": null,
        "iconUrl": "https://img-eshop.cdn.nintendo.net/i/d3c210e61e8487200fc4c344987243a60257838187a69a6a81c42d7447d5d192.jpg",
        "id": "01007EF00011E000",
    }
]

As per the description above

>Solution :

Your json data is not formatted properly in your ..en.json file. First you need to format that. Then you transform the JSON data from an object with keys as properties into an array of objects.

// en.json file content
{
  "70010000000025": {
    ...
  }
}

// App.jsx
const data = [games];

const gamesArray = Object.entries(data[0]).map(([key, value]) => ({
  key,
  ...value
}));

{gamesArray.map((game, index) => (
        <div key={index}>
          <div>Description: {game.description}</div>
          <div>Banner URL: {game.bannerUrl}</div>
        </div>
      ))}

CODE DEMO