Question

我使用Teleport API。他们的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>
         )
     })

是否有更好的方法可以在重度嵌套的JSON数据中迭代数据？

Answer 1

您无法在JS对象属性中拥有:：

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

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

您可以使用lodash _.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>
);

Answer 2

您的代码中似乎有语法错误，因为:是保留字。您应该以这种方式访问您的媒体资源

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

旁注：您可能希望在访问之前检查嵌套属性是否存在，以避免错误cannot access property pp of undefined

Answer 3

由于您提到了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', ''),

当您尝试访问数据时，为了防止使用保留关键字:，这也有助于防止数据在数据不存在时崩溃。

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

3 个答案: