Ionic 2でJSONを解析する方法は?

パラグカートペイ

私はIonic-2ハイブリッドアプリ開発の初心者であり、Webサービスを使用するためにJSONを解析する必要があります。サーバーから応答を得ることができません。サーバーからデータを取得して「製品詳細ページ」に表示する必要があります。私のJson構造は

{
"id": 1,
"product": "Gerbera",
"product_type_id": 1,
"description": "Gerbera L. is a genus of plants Asteraceae. It was named in honour of German botanist and medical doctor Traugott Gerber | who travelled extensively in Russia and was a friend of Carl Linnaeus.",
"images": "http://factoryunlock.in/sundar/public/uploads/photos/07_17/1500965697_Growing-Gerbera-Flowers.jpg" }

私のionicHome.tsファイルコードは次のとおりです。

 import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { EarthquakesProvider } from'../../providers/earthquakes/earthquakes';
@IonicPage()
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [EarthquakesProvider]
})
export class DetailsPage {

   // public DateList: Array<Object>;

    item: any;
     id: number;
    constructor(public navCtrl: NavController, public earthquakes: EarthquakesProvider, public navParams: NavParams) {

         this.id = navParams.get('id');


    }
    ionViewDidLoad() {
        this.getEarthquakes(this.id);
}
    getEarthquakes(id) {
        this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {
         this.item=res;

        });
    }

 }

私のhome.htmlファイルは次のとおりです。

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title> Product Details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="content-background">

  <ion-list>
    <button ion-item  style="background: #eee;border: 1px solid #888;height: 40px">

      {{ " Flower Name :" + product }} 

    </button>

    <ion-card >
      <div class=" col-50">
        <ion-item  style="width:100%">
          <img [src]="images" />
        </ion-item>
      </div>
      </ion-card>

      <button ion-item text-wrap style="background: #eee;border: 1px solid #888">
        <div class="item item-text-wrap">


          {{" Discription :" +  description }}

</div>

      </button>

      <ion-list>

私のプロバイダーコードは次のとおりです。

loadEarthquakesdetails(id) {
        let headers = new Headers();
            headers.append('Content-Type', 'application/json');  
            headers.append('Authorization', 'Bearer ' + "eAKu0hiSYTqJTkV2yaBz6K1gVDK2TIDFcemjut3nlNoEJTRCNGEKHXRTi972");
        return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`,{headers: headers})
            .map(res => res.json());
    }

私のアプリのスクリーンショット:

画面1

解決策を提案してください。ありがとうございました。

Swapnil Patwa

Home.ts

public item: any = {};

Home.html

    <ion-list>
        <button ion-item style="background: #eee;border: 1px solid #888;height: 40px">
         Flower Name:  {{item?.product}}
        </button>
        <ion-card>
            <div class=" col-50">
                <ion-item style="width:100%">
                    <img [src]="item?.images" />
                </ion-item>
            </div>
        </ion-card>

        <button ion-item text-wrap style="background: #eee;border: 1px solid #888">
            <div class="item item-text-wrap">
              Discription : {{ item?.description }}
            </div>
          </button>


   </ion-list>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

URLからjson形式ではなくxml形式でrssフィードを解析する方法-Ionic2

分類Dev

Ionic2 フレームワークで Json データを解析する方法は?

分類Dev

ionic3でJson.stringify()を解析する方法

分類Dev

ionic 2 で pushwoosh を実装する方法

分類Dev

Ionic:$ ionicPopupでcssClassを使用する方法は?

分類Dev

IonicでHighchartsを使用する方法は?

分類Dev

ネストされたjsonを角度4で解析する(IONIC)

分類Dev

Ionic 2でボタンを無効/有効にする方法は?

分類Dev

Ionic 2でViewController.willEnterをモックする方法は?

分類Dev

Ionic 2 / TypeScriptで(Cordova)プラグインを使用する方法は?

分類Dev

ionic 2でrtspライブビデオを再生する方法は?

分類Dev

JSONからリストデータ値Ionic2を取得する方法は?

分類Dev

Ionic 2:ionic2スライダーを動的にする方法

分類Dev

IonicでオブジェクトをJsonに変換する方法は?

分類Dev

Ionic 2-Androidの戻るボタンでアプリを終了する方法は?

分類Dev

HTTP JSON 応答を HTML (Ionic2、Angular2、TypeScript、PHP、JSON) に取得する方法は?

分類Dev

Ionic 2 + Angular2でVideo.jsを使用する方法

分類Dev

ionic2でマーカーをマップ上に移動する方法は?

分類Dev

ionic2アプリで通知をプッシュする方法は?

分類Dev

Ionic 2+でイオン入力をワードラップする方法は?

分類Dev

ionicでjsonファイルを読み書きする方法

分類Dev

ionic 3でjsonデータを表示する方法

分類Dev

ionicでjson文字列から値を取得する方法

分類Dev

Ionic:divを中央に配置する方法は?

分類Dev

@ ionic / storageをテストする方法は?

分類Dev

IonicなしでAngular2でCordovaを使用する方法

分類Dev

ionic / ionic 2 / ionic 3 / ionic 4 / ionic 5でローカルコルドバプラグインを追加するにはどうすればよいですか?

分類Dev

ionicでビューを更新する方法

分類Dev

Angularfire 2 and Ionic 2

Related 関連記事

  1. 1

    URLからjson形式ではなくxml形式でrssフィードを解析する方法-Ionic2

  2. 2

    Ionic2 フレームワークで Json データを解析する方法は?

  3. 3

    ionic3でJson.stringify()を解析する方法

  4. 4

    ionic 2 で pushwoosh を実装する方法

  5. 5

    Ionic:$ ionicPopupでcssClassを使用する方法は?

  6. 6

    IonicでHighchartsを使用する方法は?

  7. 7

    ネストされたjsonを角度4で解析する(IONIC)

  8. 8

    Ionic 2でボタンを無効/有効にする方法は?

  9. 9

    Ionic 2でViewController.willEnterをモックする方法は?

  10. 10

    Ionic 2 / TypeScriptで(Cordova)プラグインを使用する方法は?

  11. 11

    ionic 2でrtspライブビデオを再生する方法は?

  12. 12

    JSONからリストデータ値Ionic2を取得する方法は?

  13. 13

    Ionic 2:ionic2スライダーを動的にする方法

  14. 14

    IonicでオブジェクトをJsonに変換する方法は?

  15. 15

    Ionic 2-Androidの戻るボタンでアプリを終了する方法は?

  16. 16

    HTTP JSON 応答を HTML (Ionic2、Angular2、TypeScript、PHP、JSON) に取得する方法は?

  17. 17

    Ionic 2 + Angular2でVideo.jsを使用する方法

  18. 18

    ionic2でマーカーをマップ上に移動する方法は?

  19. 19

    ionic2アプリで通知をプッシュする方法は?

  20. 20

    Ionic 2+でイオン入力をワードラップする方法は?

  21. 21

    ionicでjsonファイルを読み書きする方法

  22. 22

    ionic 3でjsonデータを表示する方法

  23. 23

    ionicでjson文字列から値を取得する方法

  24. 24

    Ionic:divを中央に配置する方法は?

  25. 25

    @ ionic / storageをテストする方法は?

  26. 26

    IonicなしでAngular2でCordovaを使用する方法

  27. 27

    ionic / ionic 2 / ionic 3 / ionic 4 / ionic 5でローカルコルドバプラグインを追加するにはどうすればよいですか?

  28. 28

    ionicでビューを更新する方法

  29. 29

    Angularfire 2 and Ionic 2

ホットタグ

アーカイブ