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

Is it angular 1 that you are using?

Helping hand
– Helping hand

2018-08-07 20:22:12 +00:00
Commented Aug 7, 2018 at 20:22 — Helping hand
– Helping hand, Commented Aug 7, 2018 at 20:22

Helping hand · Accepted Answer · 2018-08-07 20:19:01Z

2

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>

edited Aug 7, 2018 at 20:19

answered Aug 7, 2018 at 20:13

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

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

Comments

sublimegeek · Accepted Answer · 2018-08-31 18:49:30Z

0

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.

edited Aug 31, 2018 at 18:49

answered Aug 7, 2018 at 20:09

sublimegeek

1101 silver badge9 bronze badges

Collectives™ on Stack Overflow

AngularJS - ng-repeat multidimensional array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related