Can not get grade in API JSON-CodePudding

I had data results to 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"
    },
  },
]

I could get itemname.content but grade.content can not.

How can I code get grade.content and substring itemname.content?

I code javascript and react

CodePudding user response：

In json api the points are not put, the get is done directly with /itemname

CodePudding user response：

if you added a blank grade to the first object it would probably find it.

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

you want your base level object structure to be consistent within the array so you're not having to check undefined all the time.

CodePudding user response：

Since it's not clear yet exactly what you are doing to access the fields I'll assume you are simply trying to map the data and hitting null/undefined access errors when an element hasn't the grade property. As you are iterating over the array you can use the Optional Chaining operator to prevent accidental null/undefined accesses.

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

Optional Chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

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