深くネストされたJSON（5つ以上のレイヤー）でデータを取得する方法

Question

私はを使用します。それらのJSONデータは大きくネストされており、関連するデータを取得するのには苦労しています。

データは以下の通りです。私はカテゴリのデータを取得したいと思います。

{ 
"_embedded": { 
"city:search-results": [ 
    { 
    "_embedded": { 
     "city:item": { 
     "_embedded": { 
      "city:urban_area": { 
      "_embedded": { 
       "ua:scores": { 
       "_links": { 
        "self": { 
        "href": "https://api.teleport.org/api/urban_areas/slug:tokyo/scores/" 
        } 
       }, 
       "categories": [ 
        { 
        "color": "#f3c32c", 
        "name": "Housing", 
        "score_out_of_10": 5.710999999999999 
        }, 
        { 
        "color": "#f3d630", 
        "name": "Cost of Living", 
        "score_out_of_10": 3.343 
        },..... 

コードです。私はReact、Redux、Lodashを使い、マップ関数でデータを反復しようとしました。

let item; 
    if(this.props.data) { 
      item = _.map(this.props.data._embedded.city:search-results._embedded.city:item._embedded.city:urban_area._embedded.ua:scores.categories, 
    /** This nested props doesn't work **/ 
    data => { 
    return (
      <div> 
      <h2>{data.name}</h2> 
      <p>{data.score_out_of_10}</p> 
      </div> 
     ) 
    }) 

重く入れ子になったJSONデータのデータを反復処理する良い方法はありますか？

Answer 1

を避けるために、それらにアクセスする前に、ネストされたプロパティが存在するかどうかを確認することをお勧めします「Tは、JSオブジェクトのプロパティに:を持っている：

const obj = { 
    "ua:scores": 1000 
}; 

console.log(obj.ua:scores); // Throws an error 
console.log(obj['ua:scores']); // returns 1000 

あなたはその私を回避するためにlodash _.getを使用することができますssueかつ安全にあなたがgetユーティリティを使用してみてくださいlodash言及しているので、あなたのネストされた値

const categories = _.get(this.props, 'data._embedded.city:search-results._embedded.city:item._embedded.city:urban_area._embedded.ua:scores.categories', []); 

return categories.map(data => 
    <div> 
    <h2>{data.name}</h2> 
    <p>{data.score_out_of_10}</p> 
    </div> 
); 

Answer 2

コードに構文エラーがあります。:は予約語です。あなたは...あなたの特性このよう代わりに

this.props.data["_embedded.city:search-results"]にアクセスする必要があり

側注：あなたはあなたができるエラーcannot access property pp of undefined

Answer 3

を取得する：あなたがデータにアクセスしようとすると、予約キーワード:の使用を防ぐために

import _get from 'lodash/get'; 

    _get(this.props.data, '_embedded.city:search-results._embedded.city:item._embedded.city:urban_area._embedded.ua:scores.categories', ''), 

をし、これは、データが存在しないときにアプリがクラッシュするのを防ぐのにも役立ちます。