APIからJSONを取得
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span class="nx">componentWillMount</span><span class="p">(){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">getpod</span><span class="dl">"</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span> <span class="na">baseURL</span><span class="p">:</span> <span class="dl">"</span><span class="s2">http://127.0.0.1:8080</span><span class="dl">"</span><span class="p">,</span> <span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">GET</span><span class="dl">"</span> <span class="p">})</span> <span class="nx">request</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">"</span><span class="s2">/getpods</span><span class="dl">"</span><span class="p">)</span> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">request</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">// console.log(request.data)</span> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="na">pods</span><span class="p">:</span> <span class="nx">request</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">items</span> <span class="p">})</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">pods</span><span class="p">)</span> <span class="p">})</span> <span class="p">}</span> |
JSONの要素を取り出す
|
1 2 3 4 5 6 7 |
<span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">ul</span><span class="o">></span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">pods</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">pod</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">return</span> <span class="o"><</span><span class="nx">li</span><span class="o">></span><span class="p">{</span><span class="nx">pod</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span> <span class="p">{</span><span class="nx">pod</span><span class="p">.</span><span class="nx">status</span><span class="p">.</span><span class="nx">phase</span><span class="p">}</span><span class="o"><</span><span class="sr">/li></span><span class="err">; </span> <span class="p">})}</span> <span class="o"><</span><span class="sr">/ul</span><span class="err">> </span> <span class="o"><</span><span class="sr">/div</span><span class="err">></span> |
取得されたJSONデータ
注意ポイント
reqest.dataとすると、一番はじめの要素がルートというか頭の部分になるのだけど、renderするときにpod.items.metadata.nameみたいなことをやってもエラーになったrequest.data.itemsとすると、一番はじめの要素がmap形式になるようで、renderするときにその次の要素から指定すればエラーはでなかった- つまるところ、stateにいれる値はmap型の階層まで定義してあげて、その部分から下の要素を普通に指定してあげればいいみたい
- そのため、取得したJSONデータの中に複数の層にまたがって必要なデータがある場合、stateを複数定義してあげてmap形式の階層で定義してあげればよいみたい
- いまいちなんでかはわからない