JSONを正常に取得して画像を表示させたい

Question

content: {
  images: [
    {
      imageUrl: "http://sample.com/1.jpg"
    },
    {
      imageUrl: "http://sample.com/1.jpg"
    }
  ]
}

上記のようなJSONとします。
imagesは0=無い場合も、3,4つある場合もあります(つまり配列です)。

この時、Next.jsで画像を表示させたいのですが、

<Image src={content.images[i].imageUrl} width="100" height: "100" />

このように、iに自動的に数値が入るようにして正常にsrcに代入して画像を表示させたいのですが、その方法でハマっています。

もちろん、

<Image src={content.images[0].imageUrl} width="100" height: "100" />

だと１番目の表示を確認済みなのですが、動的にJSONから取得して表示させたいです。

よろしくお願いいたします。

{
  "data”: [
    {
      “id": “1”,
      "contents": [
          	{
            		“type": “definition”,
            		"content": “題名１”
          	},
			{
		   		“type”: “image”,
		   		“content”: “hoge1.jpg”
			},
          	{
            		"type": “text”,
            		"content": “テキスト”
          	},
			{
		   		“type”: “image”,
		   		“content”: “hoge2.jpg”
			}
        ],
      “images": [
        	{
          	"src": “hoge1.jpg",
          	"imageUrl": “https://xxx/hoge1.jpg"
       	 },
       	 {
          	"src": “hoge2.jpg",
          	"imageUrl": “https://xxx/hoge2.jpg"
       	 }
      ]
    }
  ]
}

Comments

[退会済みユーザー]

> 上記のようなJSONとします。

JSON には見えませんけど？

[hoshi-takanori]

imageUrl が複数ある場合は全部表示するのでしょうか？ また、0 個の場合は？

[sarukawa]

> hoshi-takanori様
複数ある場合は全部表示させたいです。
０個の場合は、何も表示させません。

Answer 1

複数ある場合は全部表示させたいです。
０個の場合は、何も表示させません。

なら普通に map すれば良いかと。

<div>
  {content.images.map((image, index) => (
    <Image key={index} src={image.imageUrl} width="100" height="100" />
  ))}
</div>

---

意図している表示は↓
テキスト
画像１
テキスト
画像２

ということなら map の中にテキストを入れれば良いでしょう。

<div>
  {content.images.map((image, index) => (
    <div key={index}>
      <p>テキスト</p>
      <Image src={image.imageUrl} width="100" height="100" />
    </div>
  ))}
</div>

---

例えばこんな感じでしょうか。(タグは適当です。)

function App() {
  const data = [
    {
      "id": "1",
      "contents": [
        {
          "type": "definition",
          "content": "題名１"
        },
        {
          "type": "image",
          "content": "hoge1.jpg"
        },
        {
          "type": "text",
          "content": "テキスト"
        },
        {
          "type": "image",
          "content": "hoge2.jpg"
        }
      ],
      "images": [
        {
          "src": "hoge1.jpg",
          "imageUrl": "https://xxx/hoge1.jpg"
        },
        {
          "src": "hoge2.jpg",
          "imageUrl": "https://xxx/hoge2.jpg"
        }
      ]
    }
  ];

  const findImageUrl = (images, content) => {
    return images.find(image => image.src == content).imageUrl;
  };

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {item.contents.map(({ type, content }) => {
            switch (type) {
              case "definition":
                return <h1>{content}</h1>;
              case "text":
                return <p>{content}</p>;
              case "image":
                const imageUrl = findImageUrl(item.images, content);
                return <Image src={imageUrl} width="100" height="100" />;
            }
          })}
        </div>
      ))}
    </div>
  );
}

Comments

[sarukawa]

ありがとうございます。
該当の方法で画像は表示できたのですが、
テキスト
画像１画像２
テキスト
画像１画像２
↑このように、なってしまい、

意図している表示は↓
テキスト
画像１
テキスト
画像２
で、少し意図していない表示になってしまいます。
keyの設定が怪しいのかなと思ったのですが、中々直りません。宜しければ伺いたいです。よろしくお願いいたします。

[sarukawa]

ご回答ありがとうございます。
少し情報が足りていなかったのですが、
本文（テキスト、画像パス込み）を一括で取得し、
その中に本文のtypeがimageである場合、その箇所を画像で表示させたいです(説明が難しく済みません。。)
つまり、
本文(type text)
画像1(type image)
本文(type text)
画像2(type image)
のようなイメージです。
現状ですと、一つ目のtype=imageに反応し、画像データが本文中に2個あるため、最初のtype=imageの箇所で2枚ずつ表示してしまうようなのです。

[hoshi-takanori]

なんか全然質問文と話が違ってるんですけど…。「本文」なるもののデータ構造を正確にお示しいただけませんか？

[sarukawa]

申し訳ございません。

[sarukawa]

質問本文にJSONを記載します