я хочу получить ключ и значение от JSON в ионном

Question

Я хочу получить ключи, а также значение из файла json. Я действительно плохо знаком с ionic, и мне действительно нужно проанализировать этот файл JSON.

Я хочу отобразить его как отдельный список карт. Скажем «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>

Answer 1

Вы можете попробовать вот так ... я загрузил ваш JSON-файл в Интернете для облегчения работы. Вы можете изменить ионную карту и текстуру, создать свой собственный. Если вы хотите получить информацию о продукте на ионной карте

HTML

<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>

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;
  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;


        });
  }




}