質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

Next.js 配列の取り出し方

kuralie
kuralie

総合スコア8

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0グッド

0クリップ

179閲覧

投稿2022/12/06 05:45

編集2022/12/06 06:23

前提

Next.jsでフロントのUIを作成しています。
配列の中にさらに入っている配列の中身を取り出したいのですが、うまくいきません

実現したいこと

reviewsの中のlabelの値を取り出したい

該当のソースコード

shopData.ts

1export const mockData: Restaurant[] = [ 2 { 3 id: 1, 4 name: '', 5 description: '', 6 price: 1000, 7 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 8 thumbnailUrl: '/images/shop-1.png', 9 reviews: [ 10 { id: 1, content: '', userName: '', createdAt: '' }, 11 { id: 2, content: '', userName: '', createdAt: '' }, 12 ], 13 }, 14 { 15 id: 2, 16 name: '', 17 description: '', 18 price: 1200, 19 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 20 thumbnailUrl: '/images/shop-2.png', 21 reviews: [ 22 { id: 3, content: '', userName: '', createdAt: '' }, 23 ], 24 }, 25}

index.tsx

1{mockData.map((item, index) => ( 2 <div key={index} className='border rounded-2xl border-gray-200 bg-white overflow-hidden'> 3 <ShopCard 4 id={item.id} 5 name={item.name} 6 description={item.description} 7 price={item.price} 8 thumbnailUrl={item.thumbnailUrl} 9 holidays={item.holidays} 10 reviews={item.reviews} 11 /> 12 </div> 13 ))}

shopCard.tsx

1 2export const ShopCard = (props: Restaurant) => { 3 const { id, name, description, price, thumbnailUrl, holidays, reviews, label} = props; 4 5 return ( 6 <> 7 <p>{reviews.length}件</p> 8 <p className='pb-4'>{description}</p> 9 <div className='flex items-center gap-2 pb-2'> 10 <p className='text-xs rounded-full bg-gray-100 px-2 py-1 mr-3 w-fit'>予算</p> 11 <p>¥{price}</p> 12 </div> 13 <div> 14 <p className='text-xs rounded-full bg-gray-100 px-2 py-1 w-fit'>定休日</p> 15 {holidays && ( 16 <ul> 17 {holidays.map((item, index) => ( 18 <p key={index}>{label}</p> 19 ))} 20 </ul> 21 )} 22 </div> 23 </> 24 ); 25}; 26

試したこと

{description}などはうまく取り出されているのですが、{label}の取り出し方がよくわかりません
ぜひご教授お願い致します

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

ベストアンサー

shopData.tsのreviewsの中にはlabel含まれていないので、取り出せないのかと思います。
先に回答したかのようにlabelをreviewsの中に定義してあげるか、下記のreviewsの部分をholidaysに変えてやってみてはいかがでしょうか。

shopData.ts

1{holidays.map((item, index) => ( 2 <p key={index}>{item.label}</p> 3 ))}

投稿2022/12/06 06:05

ekTJ

総合スコア109

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kuralie

2022/12/06 06:28

reviewsとholidaysを入力し間違えておりました。 reviews→holidaysに修正したところ、 ```shopData.ts const { id, name, description, price, thumbnailUrl, holidays, reviews, label } = props; ``` のlabelの部分に `'label' is declared but its value is never read.ts Property 'label' does not exist on type 'Restaurant'` とエラーが出ます こちらはどのように修正すればよろしいでしょうか?ぜひご教授いただけますと幸いです
kuralie

2022/12/06 06:30

エラーは出ているのですが、画面には出力されているようです こちらは無視した方がよろしいでしょうか?
ekTJ

2022/12/06 06:33

const { id, name, description, price, thumbnailUrl, holidays, reviews, label } = props; こちらのlabelは不要ではないでしょうか。消せばエラー消えるかと思います。 const { id, name, description, price, thumbnailUrl, holidays, reviews} = props;
kuralie

2022/12/06 06:35

消えました!ありがとうございます!
ekTJ

2022/12/06 06:36

良かったです!頑張ってください!

0

mockDataを見る限りでは、reviewsの配列の要素にlabelプロパティが含まれていないようです。
例えば以下のようにlabelを定義してあげると、表示されるかと思います。

ts

1export const mockData: Restaurant[] = [ 2 { 3 id: 1, 4 name: '', 5 description: '', 6 price: 1000, 7 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 8 thumbnailUrl: '/images/shop-1.png', 9 reviews: [ 10 { id: 1, content: '', userName: '', createdAt: '', label: 'ラベル1' }, 11 { id: 2, content: '', userName: '', createdAt: '', label: 'ラベル2' }, 12 ], 13 }, 14 { 15 id: 2, 16 name: '', 17 description: '', 18 price: 1200, 19 holidays: [{ id: 1, label: '月曜日', value: 'monday' }], 20 thumbnailUrl: '/images/shop-2.png', 21 reviews: [ 22 { id: 3, content: '', userName: '', createdAt: '', label: 'ラベル3' }, 23 ], 24 }, 25}

投稿2022/12/06 05:51

y-temp4

総合スコア23

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。