如何访问深度嵌套在多个对象和数组中的元素的值?

Question

我正在进行API调用以从Google Distance Matrix API返回数据，并将该数据保存在我的(react(redux存储中。

返回的数据对象结构如下：

Object {
"destination_addresses": Array [
"21 Foo St, SomeCity, SomeState 33333, USA",
],
"origin_addresses": Array [
"5555 Somewhere Dr, Somewhere, Somewhere 55555, USA",
],
"rows": Array [
Object {
"elements": Array [
Object {
"distance": Object {
"text": "2,302 mi",
"value": 3703935,
},
"duration": Object {
"text": "1 day 10 hours",
"value": 123162,
},
"status": "OK",
},
],
},
],
"status": "OK",
}

当我console.log(this.props.matrixData)时返回该数据结构。

我需要访问 distance.text 和duration.text，以便我可以在组件屏幕上显示它们。

我做了几次不同的失败尝试，例如

this.props.matrixData.rows.elements.distance.text 

和

this.props.matrixData.rows[0].elements[0]

等更深入地访问，但this.props.matrixData.rows是我能够在不抛出错误的情况下获得的最深的。

有人可以帮忙吗？

Answer 1

我在(Chrome(浏览器控制台中尝试了您的示例，但我省略了"类型注释"。您的第二个访问示例对我有用，我不确定为什么它会失败。

var o = {
"destination_addresses": [
"21 Foo St, SomeCity, SomeState 33333, USA",
],
"origin_addresses": [
"5555 Somewhere Dr, Somewhere, Somewhere 55555, USA",
],
"rows": [
{
"elements": [
{
"distance": {
"text": "2,302 mi",
"value": 3703935,
},
"duration": {
"text": "1 day 10 hours",
"value": 123162,
},
"status": "OK",
},
],
},
],
"status": "OK",
};
o.rows[0].elements[0]; // logs "Object { distance: {…}, duration: {…}, status: "OK" }"

请注意，如果其中一个数组为空，o.rows[0].elements[0]将抛出错误。在某些情况下，有些库会正常失败：

• https://ramdajs.com/docs/#path，另请参阅Ramda路径的示例
• https://lodash.com/docs/#get