如何使用深度嵌套的JSON（超过5层）获取数据

Question

I use a Teleport API . Their JSON data is heavily nested and I'm struggling to get the relevant data.

The data is as below. I want to get the data in categories .

{
 "_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
                  },.....

The code. I use React, Redux and Lodash and I tried to iterate the data by map function.

 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>
         )
     })

Is there a better way to iterate the data in heavily nested JSON data?

Answer 1

You can't have : in a JS object property:

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

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

You can use lodash _.get to circumvent that issue and safely get your nested value

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

You seem to have a syntax error in your code as : is a reserved word. You should access your properties this way instead

this.props.data["_embedded.city:search-results"] ...

Side Note : You might want to check if nested properties exist before accessing them in order to avoid the error cannot access property pp of undefined

Answer 3

Since you mentioned lodash try to use the get utility :

import _get from 'lodash/get';

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

To prevent the use of the reserved keyword : when you try to access the data, and this helps also to prevent the app from crashing when the data don't exist.