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

我用的是一个。他们的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，并尝试通过map函数迭代数据

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

let项；
如果（此.props.data）{
item=u.map（this.props.data._embedded.city:search results._embedded.city:item._embedded.city:urban\u area._embedded.ua:scores.categories，
/**这个嵌套的道具不起作用**/
数据=>{
返回(
{data.name}
{data.score_out_of_10}

)
})

---

有没有更好的方法可以在大量嵌套的JSON数据中迭代数据？

您的代码中似乎有语法错误，因为

：

是一个保留字。您应该以这种方式访问属性

this.props.data[“\u embedded.city:search results”]

---

旁注：在访问嵌套属性之前，您可能需要检查它们是否存在，以避免出现错误

无法访问未定义的属性pp

您的代码中似乎有语法错误，因为

：

是保留字。您应该改为以这种方式访问属性

this.props.data[“\u embedded.city:search results”]

---

旁注：您可能希望在访问嵌套属性之前检查它们是否存在，以避免出现错误

无法访问未定义的属性pp

JS对象属性中不能有

：

：

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

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

您可以使用lodash

\uu.get

来规避该问题并安全地获取嵌套值

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

const categories=\uu.get（this.props，'data.\u embedded.city:search results.\u embedded.city:item.\u embedded.city:urban\u area.\u embedded.ua:scores.categories'，[]）；
返回categories.map（数据=>
{data.name}
{data.score_out_of_10}

);

JS对象属性中不能有

：

：

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

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

您可以使用lodash

\uu.get

来规避该问题并安全地获取嵌套值

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

const categories=\uu.get（this.props，'data.\u embedded.city:search results.\u embedded.city:item.\u embedded.city:urban\u area.\u embedded.ua:scores.categories'，[]）；
返回categories.map（数据=>
{data.name}
{data.score_out_of_10}

);

既然您提到了lodash，请尝试使用

get

实用程序：

import _get from 'lodash/get';

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

---

为了防止在您尝试访问数据时使用保留关键字

：

，这也有助于防止应用程序在数据不存在时崩溃。

既然您提到了lodash，请尝试使用

获取

实用程序：

import _get from 'lodash/get';

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

---

为了防止在您尝试访问数据时使用保留关键字

：

，这也有助于防止应用程序在数据不存在时崩溃。

谢谢。我不知道这一点。我将代码调整为

“\u embedded.city:搜索结果[0]。嵌入。城市：项目。_嵌入。城市：城市地区。_嵌入。ua:scores.categories'，[]）

as

city:search result

是一个数组。然后它就工作了。谢谢你的帮助。谢谢。我不知道。我将代码调整为

”\u嵌入。城市：搜索结果[0]._embedded.city:item._embedded.city:urban\u area._embedded.ua:scores.categories'，[]）

as

city:search result

是一个数组。然后它工作了。感谢您的帮助。