私はイオンでjsonからキーと値を取得したい

jsonファイルからキーと値も取得したいです。私は本当にionicが初めてで、このjsonファイルを解析する必要があります。

個々のカードのリストとして表示したいと思います。名前、ID、価格をリストの内容とするカードの「ProductDetails」と言います。

また、jsonファイルは動的です

{
  "ProductDetails":[{
    "ProductName":"Macintosh Apples",
    "ProductId":"Mac3323",
    "Price":"$233"
    }],
    "Producer":[{
      "ProducerName":"John's Apple Farm",
      "Product Place":"Texas USA",
      "ProductId":"Mac3323",
      "Harvest date":"13/2/2009",
      "State_in":"DISPATCHED",
      "State_out":"DELIVERED",
      "Dispatched Date":"15/2/2009"
    }],
    "Distributer":[{
      "DistributerName":"John's Distribution",
      "ProductId":"Mac3323",
      "Arrival Date":"20/2/2019",
      "State":"DISPATCHED",
      "State_out":"DELIVERED"
    }],
    "Warehouse":[{
      "WareHouse Name":"John's Warehouse",
      "ProductId":"Mac3323",
      "ArrivalDate":"21/2/2019",
      "State_in":"DISPATCHED",
      "State_out":"IN_TRANSIST"
    }],
    "Retailer":[{
      "Retailer Name":"John's Retailers",
      "ProductId":"Mac3323",
      "State_in":"IN_TRANSIST",
      "State_out":"IN_TRANSIST"
    }]
}

以下は私のhome.tsファイルです

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  mainObject: any;
  constructor(public navCtrl: NavController, private http: Http) {
    let localData = http.get('assets/test.json').map(res => res.json().items);
    localData.subscribe(data => {
      this.mainObject = data;
    })

  }

  keys(obj){
    return Object.keys(obj);
}
}

私はキーと値を取得しようとしました home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
<div *ngFor="let item of information">
  <ion-item *ngFor="let key of keys(item)">
       <ion-label>key: {{key}} => VALUE: {{item[key]}}</ion-label>
  </ion-item>
</div>
</ion-content>