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, Mar 26 '17 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](http://stackoverflow.com/questions/27266550/how-to-flatten-nested-array-in-javascript) b. loop through primary and nested arrays, i.e. create [nested loops](http://www.elated.com/articles/nested-arrays-in-javascript/). — maqduni, Mar 26 '17 at 13:08
what is the output of this code ? is there any error in console ? — isuruAb, Mar 26 '17 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, Mar 26 '17 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, Mar 26 '17 at 13:37

score 1 · Answer 1 · answered Mar 26 '17 at 12:59

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.

i tried to get somthing like that using symfony2 but no solution, so i tried to fix that with angular2. — rahma Nefai, Mar 26 '17 at 13:33
How do you send it from symphony ? because it will be hard to make a (durty) fix from the front end — LETOURNEUR Léo, Mar 26 '17 at 13:46

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

1 Answers1