AngularJS - ng-repeat multidimensional array

Question

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

Answer 1

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>