json - 如何在嵌套的 json 对象上执行 ngFor 循环？

Question

这看起来很简单，但不知何故我没有得到内部数组元素来在 Angular 2 上执行 ngFor 循环。

我有如下所示的 json 数组，我需要遍历嵌套元素响应数组中的可用“路由”。现在任何人都可以让我知道如何获得应该很简单的路线，我正在尝试像 this.routes=respondeJson[0].routes 或 this.routes=resonseJson[0]['routes'] 但没有运气。请帮助考虑我在 Angular 2 上的入门级别，或者说使用 JSON。

 [
  {
    "routes": {
      "0": {
        "budget": 326,
        "toCity": "United States",
        "QuoteIds": [
          1,
          2
        ],
        "options": 2
      },
      "1": {
        "budget": 374,
        "toCity": "Thailand",
        "QuoteIds": [
          3,
          4
        ],
        "options": 2
      },
      "2": {
        "budget": 382,
        "toCity": "Singapore",
        "QuoteIds": [
          5,
          6
        ],
        "options": 2
      },
      "3": {
        "budget": 451,
        "toCity": "Taiwan",
        "QuoteIds": [
          7
        ],
        "options": 1
      },
      "5": {
        "budget": 112,
        "toCity": "Turkey",
        "QuoteIds": [
          8
        ],
        "options": 1
      },
      "6": {
        "budget": 314,
        "toCity": "Saudi Arabia",
        "QuoteIds": [
          9
        ],
        "options": 1
      },
      "8": {
        "budget": 518,
        "toCity": "Indonesia",
        "QuoteIds": [
          10
        ],
        "options": 1
      },
      "10": {
        "budget": 384,
        "toCity": "Hong Kong",
        "QuoteIds": [
          11,
          12
        ],
        "options": 2
      },
      "11": {
        "budget": 232,
        "toCity": "Qatar",
        "QuoteIds": [
          13
        ],
        "options": 1
      },
      "22": {
        "budget": 254,
        "toCity": "Algeria",
        "QuoteIds": [
          14
        ],
        "options": 1
      },
      "23": {
        "budget": 241,
        "toCity": "Kuwait",
        "QuoteIds": [
          15
        ],
        "options": 1
      },
      "24": {
        "budget": 175,
        "toCity": "Israel",
        "QuoteIds": [
          16,
          17
        ],
        "options": 2
      },
      "25": {
        "budget": 266,
        "toCity": "Oman",
        "QuoteIds": [
          18,
          19
        ],
        "options": 2
      },
      "28": {
        "budget": 762,
        "toCity": "Argentina",
        "QuoteIds": [
          20,
          21
        ],
        "options": 2
      },
      "30": {
        "budget": 78,
        "toCity": "Iceland",
        "QuoteIds": [
          22
        ],
        "options": 1
      },
      "37": {
        "budget": 327,
        "toCity": "Canada",
        "QuoteIds": [
          23,
          24
        ],
        "options": 2
      },
      "39": {
        "budget": 238,
        "toCity": "Iran",
        "QuoteIds": [
          25
        ],
        "options": 1
      },
      "40": {
        "budget": 129,
        "toCity": "Cyprus",
        "QuoteIds": [
          26
        ],
        "options": 1
      },
      "41": {
        "budget": 267,
        "toCity": "United Arab Emirates",
        "QuoteIds": [
          27,
          28
        ],
        "options": 2
      },
      "42": {
        "budget": 252,
        "toCity": "Lebanon",
        "QuoteIds": [
          29
        ],
        "options": 1
      },
      "43": {
        "budget": 427,
        "toCity": "Iraq",
        "QuoteIds": [
          30
        ],
        "options": 1
      },
      "50": {
        "budget": 142,
        "toCity": "Montenegro",
        "QuoteIds": [
          31
        ],
        "options": 1
      },
      "55": {
        "budget": 418,
        "toCity": "Cuba",
        "QuoteIds": [
          32
        ],
        "options": 1
      },
      "56": {
        "budget": 492,
        "toCity": "China",
        "QuoteIds": [
          33,
          34
        ],
        "options": 2
      },
      "57": {
        "budget": 444,
        "toCity": "India",
        "QuoteIds": [
          35
        ],
        "options": 1
      },
      "62": {
        "budget": 477,
        "toCity": "Japan",
        "QuoteIds": [
          36,
          37
        ],
        "options": 2
      },
      "63": {
        "budget": 3377,
        "toCity": "Costa Rica",
        "QuoteIds": [
          38
        ],
        "options": 1
      },
      "65": {
        "budget": 210,
        "toCity": "Georgia",
        "QuoteIds": [
          39
        ],
        "options": 1
      },
      "66": {
        "budget": 391,
        "toCity": "Sri Lanka",
        "QuoteIds": [
          40,
          41
        ],
        "options": 2
      },
      "67": {
        "budget": 258,
        "toCity": "Russia",
        "QuoteIds": [
          42
        ],
        "options": 1
      },
      "68": {
        "budget": 82,
        "toCity": "Poland",
        "QuoteIds": [
          43
        ],
        "options": 1
      },
      "71": {
        "budget": 104,
        "toCity": "Finland",
        "QuoteIds": [
          44
        ],
        "options": 1
      },
      "72": {
        "budget": 150,
        "toCity": "Austria",
        "QuoteIds": [
          45,
          46
        ],
        "options": 2
      },
      "73": {
        "budget": 68,
        "toCity": "Spain",
        "QuoteIds": [
          47
        ],
        "options": 1
      },
      "75": {
        "budget": 106,
        "toCity": "Portugal",
        "QuoteIds": [
          48
        ],
        "options": 1
      },
      "77": {
        "budget": 37,
        "toCity": "Romania",
        "QuoteIds": [
          49
        ],
        "options": 1
      },
      "78": {
        "budget": 66,
        "toCity": "Sweden",
        "QuoteIds": [
          50
        ],
        "options": 1
      },
      "79": {
        "budget": 77,
        "toCity": "Denmark",
        "QuoteIds": [
          51
        ],
        "options": 1
      },
      "86": {
        "budget": 440,
        "toCity": "South Africa",
        "QuoteIds": [
          52,
          53
        ],
        "options": 2
      },
      "87": {
        "budget": 176,
        "toCity": "Morocco",
        "QuoteIds": [
          54,
          55
        ],
        "options": 2
      },
      "88": {
        "budget": 231,
        "toCity": "Serbia",
        "QuoteIds": [
          56
        ],
        "options": 1
      },
      "89": {
        "budget": 279,
        "toCity": "Bosnia and Herzegovina",
        "QuoteIds": [
          57
        ],
        "options": 1
      },
      "90": {
        "budget": 35,
        "toCity": "Italy",
        "QuoteIds": [
          58
        ],
        "options": 1
      },
      "92": {
        "budget": 72,
        "toCity": "Hungary",
        "QuoteIds": [
          59
        ],
        "options": 1
      },
      "93": {
        "budget": 155,
        "toCity": "Croatia",
        "QuoteIds": [
          60
        ],
        "options": 1
      },
      "94": {
        "budget": 160,
        "toCity": "Malta",
        "QuoteIds": [
          61,
          62
        ],
        "options": 2
      },
      "95": {
        "budget": 163,
        "toCity": "Greece",
        "QuoteIds": [
          63,
          64
        ],
        "options": 2
      },
      "96": {
        "budget": 67,
        "toCity": "Ireland",
        "QuoteIds": [
          65
        ],
        "options": 1
      },
      "97": {
        "budget": 60,
        "toCity": "Netherlands",
        "QuoteIds": [
          66
        ],
        "options": 1
      },
      "98": {
        "budget": 68,
        "toCity": "Norway",
        "QuoteIds": [
          67
        ],
        "options": 1
      },
      "99": {
        "budget": 71,
        "toCity": "Latvia",
        "QuoteIds": [
          68
        ],
        "options": 1
      },
      "100": {
        "budget": 261,
        "toCity": "Belgium",
        "QuoteIds": [
          69
        ],
        "options": 1
      },
      "101": {
        "budget": 60,
        "toCity": "Bulgaria",
        "QuoteIds": [
          70
        ],
        "options": 1
      },
      "102": {
        "budget": 130,
        "toCity": "Switzerland",
        "QuoteIds": [
          71
        ],
        "options": 1
      },
      "103": {
        "budget": 140,
        "toCity": "Ukraine",
        "QuoteIds": [
          72
        ],
        "options": 1
      },
      "104": {
        "budget": 72,
        "toCity": "France",
        "QuoteIds": [
          73
        ],
        "options": 1
      },
      "105": {
        "budget": 56,
        "toCity": "Lithuania",
        "QuoteIds": [
          74
        ],
        "options": 1
      },
      "106": {
        "budget": 51,
        "toCity": "United Kingdom",
        "QuoteIds": [
          75
        ],
        "options": 1
      },
      "109": {
        "budget": 116,
        "toCity": "Czech Republic",
        "QuoteIds": [
          76
        ],
        "options": 1
      },
      "110": {
        "budget": 59,
        "toCity": "Germany",
        "QuoteIds": [
          77
        ],
        "options": 1
      },
      "113": {
        "budget": 272,
        "toCity": "Bahrain",
        "QuoteIds": [
          78,
          79
        ],
        "options": 2
      },
      "128": {
        "budget": 634,
        "toCity": "New Zealand",
        "QuoteIds": [
          80
        ],
        "options": 1
      },
      "147": {
        "budget": 610,
        "toCity": "Australia",
        "QuoteIds": [
          81
        ],
        "options": 1
      },
      "167": {
        "budget": 187,
        "toCity": "Moldova",
        "QuoteIds": [
          82
        ],
        "options": 1
      },
      "168": {
        "budget": 87,
        "toCity": "Slovakia",
        "QuoteIds": [
          83
        ],
        "options": 1
      },
      "175": {
        "budget": 119,
        "toCity": "Gibraltar",
        "QuoteIds": [
          84
        ],
        "options": 1
      },
      "178": {
        "budget": 545,
        "toCity": "Laos",
        "QuoteIds": [
          85
        ],
        "options": 1
      }
    },
    "misc": {
      "QuoteDateTime": "2017-04-21T13:56:00",
      "MinPrice": 326,
      "Direct": false,
      "QuoteId": 1,
      "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396"
    },
    "price": [
      326,
      392,
      374,
      434,
      382,
      470,
      451,
      112,
      314,
      518,
      384,
      553,
      232,
      254,
      241,
      175,
      199,
      422,
      266,
      1125,
      762,
      78,
      403,
      327,
      238,
      129,
      290,
      267,
      252,
      427,
      142,
      418,
      492,
      641,
      444,
      477,
      937,
      3377,
      210,
      713,
      391,
      258,
      82,
      104,
      160,
      150,
      68,
      106,
      37,
      66,
      77,
      624,
      440,
      176,
      287,
      231,
      279,
      35,
      72,
      155,
      210,
      160,
      163,
      200,
      67,
      60,
      68,
      71,
      261,
      60,
      130,
      140,
      72,
      56,
      51,
      116,
      59,
      374,
      272,
      634,
      610,
      187,
      87,
      119,
      545
    ],
    "outbound": {
      "DepartureDate": "2017-05-18T00:00:00",
      "Carrier": "WOW air",
      "DestinationId": "EWR",
      "OriginId": "LGW"
    },
    "airline": [
      "WOW air",
      "Lufthansa",
      "Gulf Air",
      "EVA Air",
      "Turkish Airlines",
      "British Airways",
      "Turkish Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "Singapore Airlines",
      "Air India",
      "British Airways",
      "Pegasus Airlines",
      "Vueling Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "Monarch",
      "Oman Air",
      "Turkish Airlines",
      "British Airways",
      "United",
      "WOW air",
      "Air Transat",
      "WestJet",
      "Pegasus Airlines",
      "Cobalt",
      "Royal Brunei ",
      "Turkish Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "easyJet",
      "KLM",
      "Austrian Airlines",
      "British Airways",
      "Air India",
      "Alitalia",
      "British Airways",
      "Avianca",
      "Pegasus Airlines",
      "SriLankan Airlines",
      "Qatar Airways",
      "Pegasus Airlines",
      "Wizz Air",
      "Norwegian",
      "eurowings",
      "eurowings",
      "Vueling Airlines",
      "Monarch",
      "Blue Air",
      "Norwegian",
      "Norwegian",
      "Virgin Atlantic",
      "Ethiopian Airlines",
      "Iberia",
      "Thomson Airways",
      "Wizz Air",
      "Pegasus Airlines",
      "Flybe",
      "Wizz Air",
      "Monarch",
      "Air Malta",
      "easyJet",
      "Pegasus Airlines",
      "Aegean Airlines",
      "Aer Lingus",
      "Vueling Airlines",
      "Norwegian",
      "Wizz Air",
      "eurowings",
      "Wizz Air",
      "SWISS",
      "Ukraine International",
      "Vueling Airlines",
      "Wizz Air",
      "Flybe",
      "Flybe",
      "Flybe",
      "British Airways",
      "Pegasus Airlines",
      "Qatar Airways",
      "Royal Brunei ",
      "Wizz Air",
      "Wizz Air",
      "Monarch",
      "Singapore Airlines"
    ],
    "inbound": {
      "DepartureDate": "2017-05-22T00:00:00",
      "Carrier": "Norwegian",
      "OriginId": "JFK",
      "DestinationId": "LGW"
    }
  },
  {
    "misc": {
      "QuoteDateTime": "2017-04-19T06:33:00",
      "MinPrice": 392,
      "Direct": true,
      "QuoteId": 2,
      "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396"
    },
    "outbound": {
      "DepartureDate": "2017-05-18T00:00:00",
      "Carrier": "Lufthansa",
      "DestinationId": "EWR",
      "OriginId": "LHR"
    },
    "inbound": {
      "DepartureDate": "2017-05-22T00:00:00",
      "Carrier": "Austrian Airlines",
      "OriginId": "EWR",
      "DestinationId": "LHR"
    }
  }
]

Answer 1

你在这里得到了一些很好的答案，但所有人都在操纵你的回应并改变它的构建，而不是按原样对待它。您的响应中有一些其他数据并且想要保留这些数据，因此这里有一个使用 Pipe 的解决方案。

你的数组中似乎有两个对象，但只有一个包含routes。会一直这样吗？如果没有，您可能想要迭代响应并显示所有对象的所有路由(如果存在)，所以我会先迭代数组，然后迭代路由:

<!-- Iterate array -->
<div *ngFor="let obj of jsonData">
  <!-- iterate routes for each object using pipe -->
  <div *ngFor="let route of obj.routes | keys">
    {{route.toCity}}
  </div>
</div>

然后是键管道:

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args?: any[]): any[] {
      // check if "routes" exists
      if(value) {
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(value),
            dataArr = [];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {
            dataArr.push(value[key]);
        });
        // return the resulting array
        return dataArr;
      }
    }
}

这样您就不会操纵您的响应，并且您可以访问响应附带的所有其他数据。

Demo