解析 JSON 错误 cannot read 属性 'url' of undefined

Question

我一直在尝试解析 JSON，它有 3 组不同的数据，其中一个元素有不同数量的 children，有时 none。当 children 不存在或只有一个存在时，我收到错误消息。我将 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: Cannot read 属性 'url' of undefined.

我修改了代码以检查平面图是否至少有一个 child 然后解析数据。

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 有一个 child 仍然有错误。

我也试过这个代码，仍然得到 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？

Answer 1

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 将对应于您在问题中创建并引用为 items.

的 json 变量之一

在第一个示例中，我检查以确保 items.floorplan 至少有足够的元素来包含我要引用的 url，然后使用三元运算符 ?如果存在则输出 URL，如果不存在则输出空字符串。

在第二个例子中，我使用了|| (OR) 运算符 return 第一个计算结果为 true 的对象。如果 items.floorplan[x] 存在，那么它将是那个节点，如果不存在，我会在右侧提供一个空 url 属性的默认对象，然后只需使用结果对象中的 url。

在第三种情况下，我使用了 2020 年引入的可选链接运算符。如果 url 不存在，则此方法将 return 未定义。

在第四个示例中，我使用解构从 items 变量中提取值，并确保 url 有一个默认值，以防 items 变量没有相应的值。

但是还有很多方法可以解决这个问题。这些只是其中的一小部分，您不一定能说出哪种方法更好。这取决于您的意图和环境。除了可选链接（如果属性不存在则显示未定义），您可以看到它们产生相同的结果。

用于可选链接的 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

关于解构的文章：https://javascript.info/destructuring-assignment

解析 JSON 错误 cannot read 属性 'url' of undefined

Parsing JSON error cannot read property 'url' of undefined

parsing

json

undefined

jsonparser