在React中使用map访问嵌套json数据

7lrncoxx  于 2022-11-19  发布在  React
关注(0)|答案(1)|浏览(142)

我正在尝试使用www.example.com()访问json文件中的数据Data.map。我可以获得除以下内容之外的所有信息:

"games": [{
      "name": "Pokemon Red",
      "console": "Gameboy"
    }, {
        "name": "Pokemon: Blue",
        "console": "Gameboy"
    }, {
        "name": "Pokemon Green",
        "console": "Gameboy"
}]

我应该如何编写代码以从该嵌套数组中获取数据?

以下是json和jsx代码:

约松

[
  {
    "name": "Pikachu", 
    "type": "Electric", 
    "nr": 25,
    "img": "./25.png",
      "games": [{
      "name": "Pokemon Red",
      "console": "Gameboy"
    }, {
        "name": "Pokemon: Blue",
        "console": "Gameboy"
    }, {
        "name": "Pokemon Green",
        "console": "Gameboy"
}]
}, {
    "name": "Oshawott", "type": "Water", 
    "nr": 501,
    "img": "./501.png",
    "games": [{
      "name": "Pokemon: Black",
      "console": "Nintendo DS"
    }, {
    "name": "Pokemon: White",
    "console": "Nintendo DS"
}]
}]

JSX公司

import './index.css'
import Data from "./data/pokemon.json";

function App() {
    return (

        <div className="App">
                {Data.map(data => (<div><img src={`${data.img}`}/>
                    <br></br><p>{data.name}</p><li>Nr: {data.nr}</li><li>Type: {data.type}</li><br></br></div>))}
                
      </div>
    )
}
export default App
az31mfrm

az31mfrm1#

需要有嵌套循环

{
  Data.map((data) => (
    <>
      <div>
        <img src={`${data.img}`} />
        <br></br>
        <p>{data.name}</p>
        <li>Nr: {data.nr}</li>
        <li>Type: {data.type}</li>
        <br></br>
      </div>
      <div>
        {" "}
        <br></br>
        <p>{data.name}</p>
        <li>Nr: {data.nr}</li>
        <br></br>
      </div>
      {data.map((game) => (
        <div> 
          <br></br>
          <p>{game.name}</p>
          <li>{game.console}</li>
          <br></br>
        </div>
      ))}
    </>
  ));
}

相关问题