从离子中的JSON获取数据答案

【问题标题】：Getting Data from JSON in ionic从离子中的JSON获取数据
【发布时间】：2019-06-03 20:51:49
【问题描述】：

我正在尝试使用 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 文件中获取 Shipment。我得到的确切错误是 ERROR 错误：未捕获（承诺中）：TypeError：无法读取未定义的属性'Shipment'

【问题讨论】：

尝试使用console.log(this.trackingorder["ShipmentData"]);
如果这不起作用尝试：this.trackingorder = JSON.parse(data);
如果这不起作用，你可以调试：只需 console.log 你的this.trackingorder 看看它有什么价值。
现在你有几种方法可以解决它

标签： json parsing ionic-framework

【解决方案1】：

我发现以下方法有效。在您的 .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>

【讨论】：

【解决方案2】：

如果您使用 angular http，请在您的项目中替换这行代码。

将此行改为

this.trackingorder = 数据；

下线

this.trackingorder = data.json();

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

【讨论】：

【解决方案3】：

这取决于您使用的是哪个 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); }

【讨论】：

我使用了上面的方法，现在我得到了错误。
ERROR 错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“ShipmentData”