CODEWITHSUNDEEP
angulartypescript
Cuong Vo
Cuong Vo

Reputation: 289

How to access my array of objects that I created with my constructor in Angular 7

I am still very new to learning Angular and I do not fully understand everything yet so please bear with me. I created an array of objects that contains all the data I need and am trying to display the data using the ngFor directive. I know the data is there because I console logged it out but I do not know how to access the data using my ngFor loop.

This is the data that is console logged, console.log(this.forecastData);

[HighLows]
0: HighLows {days: Array(6), highs: Array(6), lows: Array(6)}
length: 1
__proto__: Array(0)

Here is my html

<div *ngFor="let data of this.weather.forecastHiLoData">
  {{data.days}}
  {{data.highs}}
  {{data.lows}}
</div>

I've tried different scenarios that just give me errors like

<div *ngFor="let data of this.weather.forecastHiLoData[0]">

or 

  {{data[0].days}}

Maybe it is the way I constructed the new object. When I console log out the HighLows array to the zeroth index, console.log(this.forecastData[0]), I get just this

HighLows {days: Array(6), highs: Array(6), lows: Array(6)}
days: (6) [1546225200000, 1546236000000, 1546322400000, 1546408800000, 1546495200000, 1546581600000]
highs: (6) [4.56, 13.95, 2.75, -0.24, 9.14, 13.93]
lows: (6) [4.56, 3.73, -1.44, -6.73, -8.73, -5.08]
__proto__: Object

https://stackblitz.com/edit/angular-wtu3ym?file=src%2Fapp%2Fapp.component.html

UPDATE

Looks like I am getting erros in my terminal that I will have to look into which I did not realize until now. I am still learning how to use classes/interfaces and constructors. 

ERROR in src/app/services/weather.service.ts(39,5): error TS2322: Type 'any[]' is not assignable to type 'HighLows'.
  Property 'days' is missing in type 'any[]'.
src/app/services/weather.service.ts(40,20): error TS2345: Argument of type 'Days[]' is not assignable to parameter of type 'number[]'.
  Type 'Days' is not assignable to type 'number'.
src/app/services/weather.service.ts(150,32): error TS2345: Argument of type 'number' is not assignable to parameter of type 'Days'.

Upvotes: 1

Views: 486

Answers (2)

Rahul
Rahul

Reputation: 2128

I have seen your Stackblitz and found some issue in your code - seems like you are trying to print a array weather.forecastHiLoData has multiple arrays inside it you need to loop through all the arrays to get the value

Try something like this

<div *ngFor="let day of weather.forecastHiLoData">
  <div *ngFor="let item of day.days">
    Days: {{item}}
  </div>
  <div *ngFor="let high of day.highs">
    Highs: {{high}}
  </div>
  <div *ngFor="let low of day.lows">
    Lows: {{low}}
  </div>
</div>

I can read all the values when i loop the array like above - whereas i have done some changes in your interface and services

HighLow.ts

import {Days} from './days';
import {Lows}from  './lows';
import {Highs}from './highs';

export class HighLows {
  days: Days[];
  highs:Highs[];
  lows: Lows[];

  constructor(days: Days[], highs: Highs[], lows: Lows[]) {
    this.days = days;
    this.highs = highs;
    this.lows = lows;
  }
}

Weather.service.ts

Your forecastHiLoData should be an array of HighLows[] and it should read as

public forecastHiLoData: HighLows[];

Finally I'm not sure that you can read your private variable on your html so make sure you have it as public - So your weather service injection should be public

constructor(public weather: WeatherService) { }

With all this changes i think you're done - Hope it works - Happy coding :)

Upvotes: 1

Akshay Rajput
Akshay Rajput

Reputation: 2078

saw your stackblits code. unfortunately *ngFor works in a different way.

ts code.

items = [
 "a", "b", "c", "d"
]

html code. 

<ul>
  <li *ngFor=”let item of items”>{{ item }}</li>
</ul>

In layman terms, you need to create a local variable above constructor, loop through it in HTML file to get what's inside it. (You can also create observables and subscribe them via async pipe but for the moment you can ignore it) Hope this helps

Upvotes: 0

Related Questions