Two questions related to Json structure, angular2 code and Backand service

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:

image

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.