时间戳

首页 > 解决方案 > 无法在 API JSON 中获得成绩

javascript - 无法在 API JSON 中获得成绩

问题描述

我有 API 的数据结果：

"tabledata": [
  {
    "itemname": {
      "class": "level1 levelodd oddd1 b1b b1t column-itemname",
      "colspan": 7,
      "content": "<i class=\"icon fa fa-folder fa-fw icon itemicon\"  title=\"Category\" aria-label=\"Category\"></i>Intro to Computing IT1016",
      "celltype": "th",
      "id": "cat_2_23"
    },
  },
  {
    "itemname": {
      "class": "level2 leveleven item b1b column-itemname",
      "colspan": 1,
      "content": "<a title=\"Link to Quiz activity Exercise 2.1\" class=\"gradeitemheader\" ><img class=\"icon itemicon\"  alt=\"Quiz\" />Exercise 2.1</a>",
      "celltype": "th",
      "id": "row_94_23"
    },
                    
    "grade": {
      "class": "level2 leveleven item b1b itemcenter  column-grade",
      "content": "10.00",
      "headers": "cat_2_23 row_94_23 grade"
    },
  },
]

我可以得到 itemname.content 但grade.content 不能。

如何编码获取grade.content 和子字符串itemname.content？

我编写 javascript 代码并做出反应

标签： javascriptreactjsjsonapi

解决方案

由于尚不清楚您正在做什么来访问这些字段，因此我假设您只是尝试映射数据并在元素没有该grade属性时遇到空/未定义的访问错误。当您遍历数组时，您可以使用可选链接运算符来防止意外的空/未定义访问。

el.itemname?.content
el.grade?.content

可选链

可选的链接运算符 ( ?.) 使您能够读取位于连接对象链深处的属性值，而无需检查链中的每个引用是否有效。

?.运算符类似于链接运算符，不同之处在于如果引用为空（或 ）.不会导致错误，表达式会短路并返回未定义的值。与函数调用一起使用时，如果给定函数不存在，则返回。nullundefinedundefined

const tabledata = [
  {
    "itemname": {
      "class": "level1 levelodd oddd1 b1b b1t column-itemname",
      "colspan": 7,
      "content": "<i class=\"icon fa fa-folder fa-fw icon itemicon\"  title=\"Category\" aria-label=\"Category\"></i>Intro to Computing IT1016",
      "celltype": "th",
      "id": "cat_2_23"
    },
  },
  {
    "itemname": {
      "class": "level2 leveleven item b1b column-itemname",
      "colspan": 1,
      "content": "<a title=\"Link to Quiz activity Exercise 2.1\" class=\"gradeitemheader\" ><img class=\"icon itemicon\"  alt=\"Quiz\" />Exercise 2.1</a>",
      "celltype": "th",
      "id": "row_94_23"
    },
    "grade": {
      "class": "level2 leveleven item b1b itemcenter  column-grade",
      "content": "10.00",
      "headers": "cat_2_23 row_94_23 grade"
    },
  },
];

tabledata.forEach(el => {
  console.log("item:", el.itemname?.content);
  console.log("grade:", el.grade?.content);
});

推荐阅读