Display a json object into an ionic list grouping by an item (ionic2)

Ionic Framework ionic-v3
1

How could i display a json object into an ionic list grouping by an item ( villearrive in my case ):i would like that items will be grouping by ( villearrive) , the actual problem that , for example villearrive “A” is repeated in the result ( it must be appear Only once , below is my json object :
{“FileS”:[{“matricule”:“AA-001-AA”,“villearrive”:“A”,“marque”:“Fiat”,“climatisation”:“1”,“nbrplacereserve”:“3”,“dateenregistrement”:“31/03/2017”},{“matricule”:“AA-001-AB”,“villearrive”:“A”,“marque”:“Fiat”,“climatisation”:“1”,“nbrplacereserve”:“3”,“dateenregistrement”:“31/03/2017”},{“matricule”:“AA-001-00”,“villearrive”:“A”,“marque”:“Fiat”,“climatisation”:“1”,“nbrplacereserve”:“3”,“dateenregistrement”:“31/03/2017”},{“matricule”:“Aj-001-A0”,“villearrive”:“A”,“marque”:“Fiat”,“climatisation”:“1”,“nbrplacereserve”:“3”,“dateenregistrement”:“31/03/2017”},{“matricule”:“AA-001-CG”,“villearrive”:“A”,“marque”:“Peugeot”,“climatisation”:“0”,“nbrplacereserve”:“3”,“dateenregistrement”:“31/03/2017”},{“matricule”:“AA-001-A0”,“villearrive”:“B”,“marque”:“Fiat”,“climatisation”:“0”,“nbrplacereserve”:“5”,“dateenregistrement”:“31/03/2017”},{“matricule”:“AA-051-AA”,“villearrive”:“B”,“marque”:“Fiat”,“climatisation”:“0”,“nbrplacereserve”:“5”,“dateenregistrement”:“31/03/2017”}],“success”:1}

the json object is the result of a web service ; here is the fucntion that returns the result :`RetournerdVoituresEnstation(){

this.voitureservice.getDetailsVilleArrive().subscribe(response => {
this.itemsFile =response.FileS;

});text`

}
and that is the html

<ion-item-group *ngFor="let pr of itemsFile">

<ion-item-sliding >

<ion-item class="item-checkbox-right">
<ion-thumbnail item-left>
<img src="assets/icon/louage.png">
</ion-thumbnail>
<ion-item-divider color="danger" >{{pr.villearrive}} </ion-item-divider>
<h2>{{pr.matricule}}</h2>
<h3>{{pr.marque}}</h3>
<h3>{{pr.climatisation}}</h3>
<h3>{{pr.nbrplacereserve}}</h3>
<h3>{{pr.dateenregistrement}}</h3>
</ion-item>
</ion-item-sliding>
</ion-item-group>
2

I would work backwards from the template. Write the template in a way that makes sense, such as something like this:

<ng-template ngFor let-dest [ngForOf]="dests">
<ion-item-divider>{{dest.villearrive}}</ion-item-divider>
<ion-item *ngFor="let car of dest.cars">
<h2>{{car.matricule}}</h2>
</ion-item>
</ng-template>

And then massage the data to match what is easy for the template to display:

dests = [];

http.get(url).subscribe((rsp) => {
  let carsByDest = {};
  let raw = rsp.json().FileS;
  raw.forEach((car) => {
    if (!carsByDest[car.villearrive]) {
      carsByDest[car.villearrive] = [];
    }
    carsByDest[car.villearrive].push(car);
  });
  for (let dest in carsByDest) {
    dests.push({villearrive: dest, cars: carsByDest[dest]});
  }
});
3

yes like rapropos said, and if you’re calling it from and external data source, map it, like

FileS.map.json (output)…
console.log (this.FileS);

// should give you the output

Then you reformulate it in object aka

in constructor Files = any [];

then in view template html model

button click(myData)

and finally in .ts controller file

(myData)
if this.data ==! undefined (i use it tons this days to precontrol empty forms :p)
{

// do something

}

4

No. Bad. Don’t use any. Don’t recommend that people use any.

5

It is supposed to be an internal function, of course if your app use anonymous login, sure make it something more secure.

6

It’s not about security, it’s about readability and avoiding bugs. If you force yourself to provide actual types for everything in your app, you have built yourself some valuable documentation for free, and the build system and IDE autocompletion will guard against typos.

7

And rapropros I don’t recommend to use any, i know it’s a perfomance loss, just to explain simply i use it.

8

How to explain it, in my app design everything is already on each key, so i have no worry about who or which can write in firebase.

9

and I totally agree i should not put anything on : any; was just to explain it simply.

10

Well done :wink: thanks a lot

11

glad it helped you, like rapropros said, secure it later, with data types that are not “any” :slight_smile: It can cleary become a security issue and a performance issue, it was just to show you.

1 Like
12

thanks, you saved my day. :hugs::hugs::hugs: