CODEWITHSUNDEEP
angularjstypescriptangularjs-ng-repeat
mvlanga
mvlanga

Reputation: 109

AngularJS - ng-repeat multidimensional array

I know there are already a lot questions about this topic which got answered.

Im new to Angular and haven't understood how the {{variable}} thing exactly works.

Im using an API and the respond is something like that:

data : "MTS-K"
license : "CC BY 4.0 -  https://creativecommons.de"
ok : true
stations : Array(3)
0 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
1 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
2 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
__proto__ : Object

My ts to get this data looks like this: 

this.GasStationProvider.getStations(this.location.lat, this.location.lng).subscribe(
gasStation => {
    this.gasStation = gasStation.stations;
});

and my HTML like this:

<p>{{gasStation.stations}}</p>

the rendered HTML like this:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Could you help me how I can display every "line" in the station array? Or just send me a link to a good tutorial if you know one.

Thank you very much

Upvotes: 1

Views: 336

Answers (2)

sublimegeek
sublimegeek

Reputation: 110

First, if you're using TypeScript, you're using Angular 2+ and not AngularJS. Therefore, *ngFor is the right use for this and not ng-repeat.

It works like an iterator in a for loop:

//pseudocode

for( item in array )
   //using interpolation
   {{ item.value }}

So, if you're getting Object object, you might want to try going a step further and trying to output a value in your array, like 

<p>
    {{gasStation.stations.name}}
</p>

Another tip is to console.log your object so you can see how it's coming through.

Upvotes: 0

Helping hand
Helping hand

Reputation: 2920

You can use ng-repeat to iterate through array of objects and also to iterate each field of the object.

/*First loop will iterate over all objects of gasStation*/

<p ng-repeat="station in gasStation">//iterating the stations array

  //this 2nd loop will iterate over the objects field: {id: "XXX", name: "XXX",..}

  <li ng-repeat="(key, value) in station">//iterating over each field in the object.
    {{key}} : {{value}}
  </li>

</p>

Upvotes: 2

Related Questions