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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

Q&A

1回答

1239閲覧

オブジェクト型jsonファイルのReactでの展開

RinaAoki

総合スコア13

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

0グッド

2クリップ

投稿2018/06/04 09:04

編集2022/01/12 10:55

下記のような配列を

const Title = [ { id: 1, title: 'はじめに', Subtitle: ['aaa', 'bbb'], }, { id: 2, title: 'つぎに', Subtitle: ['ccc', 'ddd'], }, { id: 3, title: 'つづいて', Subtitle: ['eee', 'fff'], }, ];

下記のように表示させたいのですが、mapで回すにはどのように書いたら良いでしょうか。。

はじめに  aaa  bbb つぎに ccc ddd つづいて eee fff

条件文なども書いたことがない初心者でして、
シンプルな配列しかmapで回したことがなく分かりません。

下記のようなものでしたらmapでの回し方もわかるのですが
要素に配列が加わるとわからないです。

const Title = [ { id: 1, title: 'はじめに', }, { id: 2, title: 'つぎに', }, { id: 3, title: 'つづいて', }, ];

どなたかご教示いただけないでしょうか。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mather

2018/06/04 10:52

配列の定義の始まりの部分が抜けています。質問についてですが、理解している部分とわからない部分をはっきりさせたほうが良いです。「シンプルな配列だったらこうやればいいと分かっている」あるいは「map 以外の方法ならこう書ける」という提示をしましょう。
RinaAoki

2018/06/04 12:00

ありがとうございます。編集いたしました。
guest

回答1

0

配列がネストしているだけなので、配列を処理する中でさらに配列を処理します。

js

1const Subtitles = (props) => { 2 const listSubtitles = props.subtitles.map( (subtitle, index) => <li key={index}>{subtitle}</li>); 3 return <ul>{listSubtitles}</ul>; 4}; 5 6const Titles = (props) => { 7 const listTitles = props.titles.map( (title, index) => <li key={index}>{title.title}<Subtitles subtitles={title.Subtitle} /></li>); 8 return <ul>{listTitles}</ul>; 9}; 10 11ReactDOM.render( 12 <Titles titles={Title}/>, 13 document.getElementById('root') 14);

投稿2018/06/04 15:42

mather

総合スコア6753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問