如何使用map方法深度提取多个图层的对象?

时间:2017-03-31 00:19:42

标签: javascript reactjs

我试图访问变更单信息,如下所示,以创建所有change_order_names的列表。使用当前代码我得到了我发布的结果。有人会告诉我如何访问变更单信息并生成列表吗?

if (componentType == CHANGE_ORDER_TYPE) {
        if (!this.props.data) {
            return null;
        } else {
            const changeList = this.props.data.map(function (result) {
                return (result.change_orders);
            });
            // return resultsList;
            console.log(changeList);
        }
    }

这是上面地图方法的当前回应。

[  
 [  
  {  
     "id":1,
     "change_order_name":"change 1",
     "project_id":"1",
     "cws_change_order_id":"33214324",
     "slug":"change-1",
     "created_at":null,
     "updated_at":null
  },
  {  
     "id":2,
     "change_order_name":"change 2",
     "project_id":"1",
     "cws_change_order_id":"3211324",
     "slug":"change-2",
     "created_at":null,
     "updated_at":null
  }
],
[  
  {  
     "id":3,
     "change_order_name":"change 3",
     "project_id":"2",
     "cws_change_order_id":"3234324",
     "slug":"change-3",
     "created_at":null,
     "updated_at":null
  },
  {  
     "id":4,
     "change_order_name":"change 4",
     "project_id":"2",
     "cws_change_order_id":"6234532",
     "slug":"change-4",
     "created_at":null,
     "updated_at":null
  }
],
[  
  {  
     "id":5,
     "change_order_name":"change 5",
     "project_id":"3",
     "cws_change_order_id":"3124214",
     "slug":"change-5",
     "created_at":null,
     "updated_at":null
  }
]
]

enter image description here

2 个答案:

答案 0 :(得分:1)

目前还不完全清楚你想要的输出是什么,但我想你想要一个包含所有change_orders的单个数组?如果这是正确的,那么您可以在当前地图功能之后使用reduce函数:

if (componentType == CHANGE_ORDER_TYPE) {
    if (!this.props.data) {
        return null;
    } else {
        const changeList = this.props.data.map(function (result) {
            return (result.change_orders);
        }).reduce((output, item) => [...output, ...item], []);
        // return changeList;
        console.log(changeList);
    }
}

const mapOutput = [  
 [  
  {  
     "id":1,
     "change_order_name":"change 1",
     "project_id":"1",
     "cws_change_order_id":"33214324",
     "slug":"change-1",
     "created_at":null,
     "updated_at":null
  },
  {  
     "id":2,
     "change_order_name":"change 2",
     "project_id":"1",
     "cws_change_order_id":"3211324",
     "slug":"change-2",
     "created_at":null,
     "updated_at":null
  }
],
[  
  {  
     "id":3,
     "change_order_name":"change 3",
     "project_id":"2",
     "cws_change_order_id":"3234324",
     "slug":"change-3",
     "created_at":null,
     "updated_at":null
  },
  {  
     "id":4,
     "change_order_name":"change 4",
     "project_id":"2",
     "cws_change_order_id":"6234532",
     "slug":"change-4",
     "created_at":null,
     "updated_at":null
  }
],
[  
  {  
     "id":5,
     "change_order_name":"change 5",
     "project_id":"3",
     "cws_change_order_id":"3124214",
     "slug":"change-5",
     "created_at":null,
     "updated_at":null
  }
]
];

const change_orders = mapOutput.reduce((orders, arr) => [...orders,...arr],[]);

console.log(change_orders);

答案 1 :(得分:0)

这是我为了获得对各个change_orders

的访问而挖掘的方式
filename1