Question 174299 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ngFor won't render accessible data. When I try it breaks my code. How can I fix this?

I am using *ngFOr to Interpolate through data. Everything seems fine on the surface, till i try accessing data nested in an object inside an object.

for instance


{
  "tvshow": [
    {
      "id": "value",
      "time": {
        "clock": "value",
        "material": {
          "type": "value"
        }
      }
    }
  ]
}



<div *ngFor="let tvshow of tvshow">
{{tvshow.id}}
{{tvshow.time.clock}} - Works
{{tvshow.time.material}} - prints out [object Object] as it should
{{tvshow.time.material.type}} - Does not work. And breaks the whole page. Makes no sense.
</div>

Anyone else came across that issue at some point ? This literally make no sense to me.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @DeWetvanAs for the answer in the comments.

    It is most likely that one of the items in your array does not have all the values. This will effectively cause a null reference error and cause the rendering to break.

    – De Wet van As

    That was actually the issue and the use of the safe navigation operator (?) fixed the problem. {{tvshow?.time?.material?.type}}


  2. 0

    It is most likely that one of the items in your array does not have all the values. This will effectively cause a null reference error and cause the rendering to break.

    Use the safe navigation operator to prevent rendering errors where the null values exist:

    {{tvshow?.time?.material?.type}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search