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

回答 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;
    
            });
      }
    
    
    }
    
    

あなたの答え