Hello, first of all sorry if my english is not perfect…
I am working on a name app, based on a json i get this result:
The json is this:
{
"a": [
{
"name": "azzz",
"genre": "male",
"favorite": false
},
{
"name": "abbb",
"genre": "male",
"favorite": false
},
{
"name": "aeeee",
"genre": "male",
"favorite": false
},
{
"name": "abaaaa",
"genre": "male",
"favorite": false
}
],
"b": [
{
"name": "bzzz",
"genre": "male",
"favorite": false
},
{
"name": "babaa",
"genre": "male",
"favorite": false
},
{
"name": "beeaaa",
"genre": "male",
"favorite": false
},
{
"name": "baau",
"genre": "male",
"favorite": false
}
]
}
And this is my content:
<ion-content class="list">
<ion-list *ngIf="names">
<ion-item-group *ngFor="let letter of names | GetKey">
<ion-item-divider light>{{letter.key}}</ion-item-divider>
<ion-item-sliding #slide *ngFor="let item of letter.value; let i = index">
<ion-item (click)="setFav(slide, letter.key, i)">
{{item.name}}
<ion-icon *ngIf="item.favorite" name="heart" item-right></ion-icon>
</ion-item>
<ion-item-options side="left">
<button (click)="setFav(slide, letter.key, i)">
<ion-icon name="heart"></ion-icon>
Set
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
</ion-content>
When names
is the json object, and GetKey is a Pipe to get the letters and use it as dividers:
import {Pipe} from '@angular/core';
@Pipe({
name: 'GetKey'
})
export class GetKey {
transform(map: {}, args: any[] = null): any {
if (!map)
return null;
return Object.keys(map)
.map((key) => ({ 'key': key, 'value': map[key] }));
}
}
This works perfect but, i am not really sure if this is an optimal way to get this result, i am talking specially about the json data structure, becouse if i have to add a name i have to go through the letter first. Maybe a better data structure can be something like this:
[
{
"name": "azzz",
"genre": "male",
"favorite": false
},
{
"name": "abbb",
"genre": "male",
"favorite": false
},
{
"name": "aeeee",
"genre": "male",
"favorite": false
},
{
"name": "abaaaa",
"genre": "male",
"favorite": false
},
{
"name": "bzzz",
"genre": "male",
"favorite": false
},
{
"name": "beeaaa",
"genre": "male",
"favorite": false
},
{
"name": "baau",
"genre": "male",
"favorite": false
}
]
And then with javascript i get the first name and make the dividers (which i am dont know how to perform this at all).
The problem start when i tried to use my data structure (the first json) in Backand service (https://www.backand.com).
In the model json i tried with this, and is valid but don’t know how to add items then:
[
{
"name": "pets",
"fields": {
"letter": {
"type": "string"
},
"names": {
"object": "petnames"
}
}
},
{
"name": "petnames",
"fields": {
"name": {
"type": "string"
},
"genre": {
"type": "string"
},
"favorite": {
"type": "boolean"
},
"pets": {
"collection": "pets",
"via": "names"
}
}
}
]
I know how to implement ionic 2 with backand based on this article: http://blog.backand.com/how-to-use-ionic-2-with-backand/
But in my case i dont have just a simple array with objects, i have an array with arrays with objects. Changing the data structure to the second example can be a good solution i think but i am not sure, any help?
Thanks in advance.