从ionic中的JSON获取数据

时间:2019-01-09 06:01:02

标签: json parsing ionic-framework

我正在尝试使用Ionic应用程序中的JSON文件获取数据。

this.http.get('https://track.delhivery.com/api/packages/json/?token=c7ac81cde31a5ea69d38cb098cab16cf7f909062&waybill=2285210000022').map(res => res.json()).subscribe(data => {
                this.trackingorder = data;
                console.log(this.trackingorder.ShipmentData);

但是我收到错误消息,即装运未定义。 我的JSON文件格式为

{
"ShipmentData": [
    {
        "Shipment": {
            "Origin": "Bengaluru_Bomsndra_PC (Karnataka)",
            "Status": {
                "Status": "Delivered",
                "StatusLocation": "Cjb_Kovaipudur_Dc (Tamil Nadu)",
                "StatusDateTime": "2018-12-20T17:57:28.002000",
                "RecievedBy": "",
                "Instructions": "Delivered to consignee",
                "StatusType": "DL",
                "StatusCode": "EOD-38"
            },
            "PickUpDate": "2018-12-18T19:44:43",
            "ChargedWeight": null,
            "OrderType": "Pre-paid",
            "Destination": "Coimbatore",
            "Consignee": {
                "City": "Coimbatore",
                "Name": "Sayal Krishna",
                "Country": "India",
                "Address2": [],
                "Address3": "",
                "PinCode": 641105,
                "State": "Tamil Nadu",
                "Telephone2": "",
                "Telephone1": [
                    "8667079713"
                ],
                "Address1": [
                    "A-198,\nTamil annai street,Gandhi nagar,madukarai\nCoimbatore 641105"
                ]
            },
            "ReferenceNo": "5160",
            "ReturnedDate": null,
            "DestRecieveDate": "2018-12-20T07:56:22.518000",
            "OriginRecieveDate": "2018-12-18T23:00:58.874000",
            "OutDestinationDate": "2018-12-19T00:54:18.663000",
            "CODAmount": 0,
            "EWBN": [],
            "FirstAttemptDate": null,
            "ReverseInTransit": false,
            "Scans": [
                {
                    "ScanDetail": {
                        "ScanDateTime": "2018-12-18T00:33:37.614000",
                        "ScanType": "UD",
                        "Scan": "Manifested",
                        "StatusDateTime": "2018-12-18T00:33:37.614000",
                        "ScannedLocation": "BLR_Kudulu_CP (Karnataka)",
                        "Instructions": "Consignment Manifested",
                        "StatusCode": "X-UCI"
                    }
                },


                {
                    "ScanDetail": {
                        "ScanDateTime": "2018-12-20T17:57:28.002000",
                        "ScanType": "DL",
                        "Scan": "Delivered",
                        "StatusDateTime": "2018-12-20T17:57:28.002000",
                        "ScannedLocation": "Cjb_Kovaipudur_Dc (Tamil Nadu)",
                        "Instructions": "Delivered to consignee",
                        "StatusCode": "EOD-38"
                    }
                }
            ],

        }
    }
]

}

请帮助我从此JSON文件获取发货。 我得到的确切错误是 错误错误:未捕获(承诺):TypeError:无法读取未定义的属性“发货”

3 个答案:

答案 0 :(得分:1)

这取决于您所使用的http模块。

对于“ @ angular / common / http”,

this.http.get('https://yourapi.com').subscribe(data => { this.trackingorder = data; console.log(this.trackingorder.ShipmentData); }

对于'@ ionic-native / http',

this.http.get('https://yourapi.com').subscribe(data => { this.trackingorder = JSON.parse(data); console.log(this.trackingorder.ShipmentData); }

答案 1 :(得分:0)

如果您使用的是尖角http,请在您的项目中替换此行代码。

将此行更改为

this.trackingorder =数据;

下一行

    Frame   SizeOfExposure
0    1         5
1    1         5
2    2         7
3    3         2
4    3         8

应该解决您的问题。祝一切顺利。

答案 2 :(得分:0)

我发现以下方法有效。 在您的.ts文件中使用

this.http.get("https://track.delhivery.com/api/packages/json/?token=c7ac81cde31a5ea69d38cb098cab16cf7f909062&waybill=2285210000022")
  .subscribe((userData) => {
     console.log("shipment data" +userData);
    this.users.push(userData);

  });

在HTML文件中,使用以下内容

<div *ngFor ="let Scan of users[0].ShipmentData[0].Shipment.Scans" class="item h5">
      <div *ngIf="Scan.ScanDetail.Scan=='Manifested'">
    <h5 style="font-size:12px;color:black;">• {{Scan.ScanDetail.ScannedLocation}}</h5>

    </div>