how to access to an array of array (JSON) with angular2

Question

i have this JSON response

places":[{"libPlace":"Le Colis\u00e9e","idPlace":1},[{"dateEventPlace":"2017-03-19T08:09:00+0000"},{"dateEventPlace":"2017-03-19T14:19:00+0000"},{"dateEventPlace":"2017-03-24T14:08:00+0000"}],{"libPlace":"ABC","idPlace":2},[{"dateEventPlace":"2017-03-22T14:10:00+0000"},{"dateEventPlace":"2017-03-24T16:20:00+0000"}]]

i want to get something like that (i'm using Angular2)

libPlace : 2017-03-19T08:09:00+0000
           2017-03-19T08:09:00+0000
           2017-03-19T08:09:00+0000

i've tried this and it returns just the "libPlace" values

          <div *ngFor="let place of places " class="day clearfix">
            {{place.libPlace}}
                <div *ngFor="let times of place ">
                   {{times?.dateEventPlace}}
                </div>
            </div>

here is my component.ts

places: any[];

ngOnInit(){
    this.route.params

        this.route.params
        .switchMap((params: Params) =>{

            return this.movieService.getPlaces(+params['id']);
    })  
        .subscribe((places: any) => {this.places = places;


        });

i also tried to send this to angular2 and ignore duplicates using a pipe or the _groupBy (from _Underscore.js) but still it didn't work with me

"places":[{"libPlace":"Le Colis\u00e9e","idPlace":1,"dateEventPlace":"2017-03-19T08:09:00+0000"},{"libPlace":"Le Colis\u00e9e","idPlace":1,"dateEventPlace":"2017-03-19T14:19:00+0000"},{"libPlace":"Le Colis\u00e9e","idPlace":1,"dateEventPlace":"2017-03-24T14:08:00+0000"},{"libPlace":"ABC","idPlace":2,"dateEventPlace":"2017-03-15T07:13:00+0000"},{"libPlace":"ABC","idPlace":2,"dateEventPlace":"2017-03-22T14:10:00+0000"},{"libPlace":"ABC","idPlace":2,"dateEventPlace":"2017-03-24T16:20:00+0000"}]}

it's because dateEventPlace is inside an array which on the same level with the object where your libPlace is, you should be looping inside that array as well to get those dateEventPlace — Roljhon
– Roljhon, Commented Mar 26, 2017 at 12:54
First of all your JSON is invalid. Second, you are trying to loop through a nested array, so you either have to, a. flatten it and and loop through it once b. loop through primary and nested arrays, i.e. create nested loops. — maqduni
– maqduni, Commented Mar 26, 2017 at 13:08
what is the output of this code ? is there any error in console ? — isuruAb
– isuruAb, Commented Mar 26, 2017 at 13:14
@IsuruAb i got this exception : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. — rahma Nefai
– rahma Nefai, Commented Mar 26, 2017 at 13:28
That means . you are passing an object not an array. add your full json and your TS file relevant to this html — isuruAb
– isuruAb, Commented Mar 26, 2017 at 13:37

LETOURNEUR Léo · Accepted Answer · 2017-03-26 12:59:59Z

1

to do what you whant to do, your json is totally wrong, it should be :

places":[
{
   "libPlace":"Le Colis\u00e9e",
   "idPlace":1,
   "times":[
      {"dateEventPlace":"2017-03-19T08:09:00+0000"},
      {"dateEventPlace":"2017-03-19T14:19:00+0000"},
      {"dateEventPlace":"2017-03-24T14:08:00+0000"}
   ]
},
{
   "libPlace":"ABC",
   "idPlace":2,
   "times":[
       {"dateEventPlace":"2017-03-22T14:10:00+0000"},
       {"dateEventPlace":"2017-03-24T16:20:00+0000"}
   ]
}
]

And the second for loop should be *ngFor="let times of place.times".

In your json, times are not in the same object than the libplace so there is no match between your libplace and the times.

answered Mar 26, 2017 at 12:59

LETOURNEUR Léo

3114 silver badges12 bronze badges

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

2 Comments

rahma Nefai Over a year ago

i tried to get somthing like that using symfony2 but no solution, so i tried to fix that with angular2.

LETOURNEUR Léo Over a year ago

How do you send it from symphony ? because it will be hard to make a (durty) fix from the front end

Collectives™ on Stack Overflow

how to access to an array of array (JSON) with angular2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related