Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

angular - How to do ngFor loop on nested json object?

It seems to be simple thing to do, but somehow i did not get inner array element to do ngFor loop on Angular 2.

I have json array as below, and i need to iterate through available 'routes' in my response array which is nested element. Now can any one let me know how can i get route which should be simple and i am trying like this.routes=respondeJson[0].routes Or this.routes=resonseJson[0]['routes'] but no luck. Please help considering my entry level here on Angular 2 or say working with 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,

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You have gotten some good answers here, but all are manipulating your response and changing the build of it, instead of treating it as is. There is some other data in your response and want to retain the data, so here's a solution using Pipe instead.

You seem to have two objects in your array, but only one contains routes. Will this always be the case? If not, you might want to iterate the response and show all routes (if exists) for all objects, so I'd iterate the array first, and then iterate the 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>

And then the keys pipe:

@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;
      }
    }
}

This way you have not manipulated your response, and you have access to all other data that is coming with the response.

Demo


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...