无法在 API JSON 中获得成绩答案

【问题标题】：Can not get grade in API JSON无法在 API JSON 中获得成绩
【发布时间】：2021-12-09 14:59:07
【问题描述】：

我有 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 代码并做出反应

【问题讨论】：

您能否更新您的问题，向我们展示您正在使用的代码在做什么？如果我们看不到代码在做什么，我们真的无能为力。 stackoverflow.com/help/minimal-reproducible-example
如果你能得到itemname.content你应该可以用同样的方法得到grade.content。

标签： javascript reactjs json api

【解决方案1】：

json api中没有放积分，直接用/itemname获取

【讨论】：

【解决方案2】：

如果您为第一个对象添加了空白等级，它可能会找到它。

[
{
  itemname: {},
  grade: {},
}
]

您希望基本级别的对象结构在数组中保持一致，这样您就不必一直检查 undefined。

【讨论】：

所以解析为 tabledata.filter(item => item.grade)

【解决方案3】：

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

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

可选链接

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

?. 运算符类似于 . 链接运算符，除了如果引用无效（null 或 undefined)，表达式短路，返回值为不明确的。与函数调用一起使用时，如果返回 undefined 给定的函数不存在。

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);
});

【讨论】：

非常感谢！！关键字：可选链接。但我想对 itemname.content 进行子串化，您可以向我提出计算 IT1016 简介和练习 2.1 的建议。我的大哥
@TedMinh 这些子字符串值是动态的吗？您可以依赖 itemname.content 值的模式/结构吗？
"first value":"<i class=\"icon fa fa-folder fa-fw icon itemicon\" title=\"Category\" aria-label=\"Category\"></i>Intro to Computing IT1016" "second value": "<a title=\"Link to Quiz activity Exercise 2.1\" class=\"gradeitemheader\" href=\""><img class=\"icon itemicon\" src=\" alt=\"Quiz\" />Exercise 2.1</a>"," "third value":"<a title=\"Link to Quiz activity Exercise 2.2\" class=\"gradeitemheader\" href=\""><img class=\"icon itemicon\" src=\"" alt=\"Quiz\" />Exercise 2.2</a>"," 这个我不知道。
@TedMinh 我猜你对i 标记的末尾进行字符串搜索以获取第一个字符串，并且可能使用正则表达式来获取“Exercise n.n”字符串。是否可以获取尚未格式化为 HTML 的数据？

【解决方案4】：

itemname 和grade 必须在同一个对象中吗？

如果没有，您可以执行以下操作...

"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"
    },
  },
]

【讨论】：