3 回答

TA貢獻1893條經驗 獲得超10個贊
...引用OP ...
...
<p>{leg.segments[0].arrivalCity.caption}</p>
或者...<p>{leg.segments[leg.segments.length - 1].arrivalCity.caption}</p>
誤解可能是由于沒有像數組一樣對待legs
。因此,為了始終訪問arrivalCity
每個segments
數組的最后一項,必須legs
首先迭代該數組。
使用OP的示例數據并實現一個基本的渲染函數,該函數首先迭代數組,并且僅在每次迭代時始終通過eglegs
訪問當前數組的最后一項,正如OP已經正確完成的那樣,除了預期的結果之外,什么都不會失敗將呈現...segments
segmentList[segmentList.length - 1]
倫敦
莫斯科
... 例子 ...
function renderListOfLastArrivalCities(dataList) {
const listNode = document.querySelector('.last-arrivals');
dataList.forEach(({ segments: segmentList }) => {
//const lastSegmentItem = segmentList[segmentList.length - 1];
//const arrivalCity = lastSegmentItem && lastSegmentItem.arrivalCity;
const arrivalCity = segmentList[segmentList.length - 1]?.arrivalCity;
if (arrivalCity) {
const itemNode = document.createElement('li');
itemNode.textContent = arrivalCity.caption || '';
listNode.appendChild(itemNode);
}
})
}
const legs = [{
"segments": [{
"arrivalCity": {
"uid":"LED",
"caption":"ST PETERSBURG"
}
}, {
"arrivalCity": {
"uid":"LON",
"caption":"LONDON"
}
}]
}, {
"segments": [{
"arrivalCity": {
"uid":"MOW",
"caption":"MOSCOW"
}
}]
}];
renderListOfLastArrivalCities(legs);
<ul class="last-arrivals"></ul>

TA貢獻1807條經驗 獲得超9個贊
它無法重現您的問題。請向我們展示您的陣列。
假設你的數組是,
var leg={segments:[{arrivalCity:{caption:"cap1"}}]};
然后如果你跑;
leg.segments[leg.segments.length - 1].arrivalCity.caption
您將看到預期輸出為“cap1”

TA貢獻1963條經驗 獲得超6個贊
看起來就像你leg.segments[leg.segments.length - 1]
的,我認為它是沒有arrivalCity屬性的對象。如果有,那么您一定是犯了任何拼寫錯誤,或者您的數據形狀可能不同。
您能否與我們分享您的陣列以供我們查看。
添加回答
舉報