Question 285770 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Nested JSON – Retrieve a paramater using React

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

Tags:

2

Answers


  1. 0

    Try:

    {value["**bannerUrl**"]}

    Also notice that your data is nested inside another object 70010000000025:

        "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",
    }
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search