我一直在嘗試決議 JSON，它有 3 組不同的資料，其中一個元素有不同數量的子元素，有時沒有。當沒有孩子或只有一個孩子在場時，我會收到錯誤訊息。我將 JSON 宣告為 var 資料。
JSON A
{
"floorplan": [
{
"title": "plan1",
"url": "https://media.plan1.pdf"
},
{
"title": "plan2",
"url": "https://media.plan2.pdf"
}
]
}
JSON B
{"floorplan": []}
JSON C
{
"floorplan": [
{
"title": "plan1",
"url": "https://media.plan1.pdf"
}
]
}
我像這樣決議 JSON：
var items = JSON.parse(data);
return {
floorplan1: items.floorplan[0].url;
floorplan2: items.floorplan[1].url;
}
但是，它只回傳 JSON A 的資料，對于其他 2，它給出了TypeError：無法讀取未定義的屬性“url”。
我修改了代碼以檢查平面圖是否至少有一個孩子，然后決議資料。
var items = JSON.parse(data);
var plan = items.floorplan[0];
if(plan){
return {
floorplan1: items.floorplan[0].url;
floorplan2: items.floorplan[1].url;
}
}
新代碼回傳了 JSON A 和 B 的資料（作為空行），但給了 C 錯誤。C 有一個孩子仍然得到錯誤。
我也試過這段代碼，仍然得到 JSON C 的錯誤。
var items = JSON.parse(data);
var plan = items.floorplan[0];
var plan1;
var plan2;
if(plan){
plan1 = items.floorplan[0].url;
plan2 = items.floorplan[1].url;
}
return{
floorplan1 : plan1 ? plan1 : null;
floorplan2 : plan2 ? plan2 : null;
}
有什么方法可以嘗試為所有 3 種型別的 JSON 回傳資料？
uj5u.com熱心網友回復：
let data = `
[{"floorplan": [{
"title": "plan1",
"url": "https://media.plan1.pdf"
}, {
"title": "plan2",
"url": "https://media.plan2.pdf"
}]},
{"floorplan": []},
{"floorplan": [{
"title": "plan1",
"url": "https://media.plan1.pdf"
}]}]`;
let json = JSON.parse(data);
//console.log(json);
json.forEach(items=>{
//console.log(items);
let o = {
floorplan1: items.floorplan.length > 0 ? items.floorplan[0].url : '',
floorplan2: items.floorplan.length > 1 ? items.floorplan[1].url : ''
};
console.log(o);
o = {
floorplan1: (items.floorplan[0] || {'url':''}).url,
floorplan2: (items.floorplan[1] || {'url':''}).url
};
console.log(o);
o = {
floorplan1: items.floorplan[0]?.url,
floorplan2: items.floorplan[1]?.url
};
console.log(o);
const {floorplan: [one = {url:''}, two = {url:''}]} = items;
o = {
floorplan1: one.url,
floorplan2: two.url
};
console.log(o);
});當然。有幾種方法，而且比我在這里的方法更多。我已將所有原始資料放入一個字串中，將其決議為字串，json然后對其進行迭代。在每個回圈中，我的變數items將對應于您在問題中創建和參考的 json 變數之一items。
在第一個示例中，我檢查以確保 items.floorplan 至少有足夠的元素來包含我嘗試參考的 url，然后使用三元運算子 ? 如果存在則輸出該 URL，如果不存在則輸出空字串。
在第二個例子中，我使用 || (OR) 運算子回傳計算結果為真的第一個物件。如果 items.floorplan[x] 存在，那么它將是該節點，如果不存在，我會在右側提供一個默認物件，該物件具有一個空的 url 屬性，然后只使用結果物件中的 url。
在第三個中，我使用了 2020 年引入的可選鏈運算子。如果 url 不存在，此方法將回傳 undefined。
在第四個示例中，我使用解構從 items 變數中提取值，并確保 url 有一個默認值，以防 items 變數沒有相應的值。
但是還有很多方法可以解決。這些只是一些，您不一定能說哪種方法更好。這取決于您的意圖和環境。除了可選鏈（如果屬性不存在，則顯示 undefined），您可以看到它們產生相同的結果。
可選鏈的 DOCS：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
用于解構的 DOCS：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
An article on destructuring: https://javascript.info/destructuring-assignment
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/333869.html