Question

我想从json文件中获取密钥以及值。我真的是离子的新手，我真的需要解析这个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>

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;


        });
  }




}

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

1 个答案: