我想从ionic中的json中获取键和值

我想从json文件中获取密钥和值。我对爱奥尼亚真的很陌生，我真的需要解析这个json文件

我想将其显示为单个卡片列表。在一张卡片中显示“ProductDetails”，并将名称、id和价格作为其列表内容

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>

测试
key:{{key}}=>VALUE:{{{item[key]}

您可以这样尝试……我在线上传了您的JSON文件，以便于操作。您可以修改ion卡和纹理，自行设计。如果您需要ion卡上的产品详细信息

HTML

---

您能在@PareshGami处创建工作代码段吗？@PareshGami这里您已经检查过了，但我想http.get并没有读取json文件

<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
 <div>
  <ion-item  *ngFor="let item of value">
    <ion-card>
       Price:{{item.Price}}
       productionid: {{item.ProductId}}
       productName:{{item.ProductName}}
    </ion-card>
  </ion-item>
</div>

</ion-content>

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;
  value:any



  constructor(public navCtrl: NavController, private http: Http) {

            let url ="https://api.myjson.com/bins/mm89q";

            this.http.get(url).map(res => res.json()).subscribe(resp => {

            this.value = resp.ProductDetails;


        });
  }




}