Angular getting array TypeError: Cannot read property '1' of undefined

Question

I have following JSON struncture:

{
  "daypart": [
    {
      "temperature": [
        45,
        27,
        47
      ]
    }
  ]
}

I am trying to display arrays above from JSON API . l want to display only first element form this array , but am getting the following error

Error: Uncaught (in promise): TypeError: Cannot read property '1' of undefined

Code :

 this.http.get("xxxxxxxx")
      .subscribe(data => {

        let f = data["daypart"][0]

        this.duhok = f

        console.log("duhok" +  this.duhok["temperature"][1])

      })

Html :

    {{duhok.temperature[1]}}°

The error is pretty self-explanatory, your temperature variable is undefined. Try doing some console logs when the data comes in to see where your error is — chrismclarke
– chrismclarke, Commented Aug 23, 2019 at 13:07

Qellson · Accepted Answer · 2019-08-23 13:08:30Z

5

I'll take a wild guess here and say that the html is rendered before the request is resolved. Try wrapping the interpolation in a ngIf block

<div *ngIf="duhok">
 {{duhok.temperature[1]}}°
</div>

answered Aug 23, 2019 at 13:08

Qellson

5522 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2019-08-24 06:12:49Z

2

If you just want to display the first temperature out of the whole JSON structure you could use the following code. Using the async pipe has the advantage that you don't have to subscribe/unsubscribe the observable manually.

TS:

public getData(): Observable {
  return this.http.get("xxxxxxxx");
}

HTML:

{{(getData() | async)?.daypart[0].temperature[1]}}

edited Aug 24, 2019 at 6:12

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 23, 2019 at 13:27

Tho.Tra

1551 silver badge9 bronze badges

Comments

Kostas Asargiotakis · Accepted Answer · 2019-08-23 13:12:24Z

0

Maybe its because the data are not resolved when you arrive on that component. You can add a resolver to that component on that route, to make sure that when you get there your data has been reolved. Check this: https://angular.io/api/router/Resolve

answered Aug 23, 2019 at 13:12

Kostas Asargiotakis

1441 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular getting array TypeError: Cannot read property '1' of undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related