無法在APIJSON中獲得成績

我有資料結果到 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 代碼并做出反應

uj5u.com熱心網友回復：

在json api中沒有放置點，直接使用/itemname完成獲取

uj5u.com熱心網友回復：

如果您為第一個物件添加了一個空白等級，它可能會找到它。

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

您希望您的基本級別物件結構在陣列中保持一致，因此您不必一直檢查 undefined。

uj5u.com熱心網友回復：

由于尚不清楚您訪問欄位的具體操作，我假設您只是嘗試映射資料并在元素沒有grade屬性時遇到空/未定義訪問錯誤。當您迭代陣列時，您可以使用Optional Chaining 運算子來防止意外的空/未定義訪問。

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

可選鏈

的可選鏈接運營商（?.），可以讀取位于深連接的物件的一個鏈內的屬性的值，而不必檢查鏈中的每一個參考是有效的。

該?.運算子類似于.鏈接運算子，不同之處在于，如果參考為空（null或 undefined），則運算式不會導致錯誤，而是回傳值為 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);
});

uj5u.com熱心網友回復：

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

標籤：javascript 反应 json 接口

上一篇：如何從API向動態更改的物件添加屬性？

下一篇：如何在laravelblade.php中使用JSON檔案