表示したい順番が入っている items.json と表示したい内容が入っている data.json があります。

items.json

{
  "items": ["りんご", "バナナ", "みかん"]
}

data.json

{
  "data": {
    "みかん": 10,
    "りんご": 25,
    "バナナ": 15
  }
}

items の順番通りに、data の内容を React で表示したいと考えています。

まずは、items を map で展開します。

import React from "react"

import itemsJson from "./jsons/items.json"
import dataJson from "./jsons/data.json"

function App() {
  return (
    <>
      <ul className="space-y-2">
        {itemsJson.items.map((item, index) => (
          <li key={index}></li>
        ))}
      </ul>
    </>
  )
}

export default App

通常は、data の key を指定するために、dataJson.data.りんごなどを指定すると、value が取得できるのですが、動的にすると、うまくいきません。

動的に取得するには、オブジェクトの後に『[]』を使い、[]の中で key を指定します。

今回は、dataJson.data[item]となります。

<ul className="space-y-2">
  {itemsJson.items.map((item, index) => (
    <li key={index}>{dataJson.data[item]}</li>
  ))}
</ul>

ブラウザで確認すると、

image2

data の value を取得することができました。

わかりやすく表示すると、

<ul className="space-y-2">
  {itemsJson.items.map((item, index) => (
    <li key={index}>
      {item}は、{dataJson.data[item]}個
    </li>
  ))}
</ul>

image3

配列の順番通りにオブジェクトの value を取得していることがわかります。

ブログ一覧