Home Map JSON Data to in Angular 6 array using component not view
Reply: 0

Map JSON Data to in Angular 6 array using component not view

user5595
1#
user5595 Published in June 19, 2018, 2:22 pm

I'm trying to map and assign json response data to an array in the angularjs component but i'm not able to do it in the component and then pass it to the view, here is my code

flight-list.component.ts

import { Component, OnInit } from '@angular/core';
import { FlightService } from "../flight.service";
import 'rxjs/Rx';

@Component({
  selector: 'flight-list',
  templateUrl: './flight-list.component.html',
  styleUrls: ['./flight-list.component.css']
})

export class FlightListComponent implements OnInit {

  private flightData: any;
  private items: any;
  private flightKey: any;
  private onwards: any;
  private list: string[] = [];

  constructor(private svc: FlightService) {}

  ngOnInit() {
  this.svc.getFlights().subscribe(data => {

      this.flightData = data;

      for (var flights in data['response']) {
        for (var flight in data['response'][flights]) {
        for (var flight in data['response']['']) {
          console.log(flight);
        }  
        }  
      }

      });
  };
}

JSON Response from the api

response: { docKey: "QkxSfE1BQXwyMDE4LTA3LTE5fHwxfDF8MHxFfERPTQ==",
bestPrice: { partnerName: "Cleartrip", baseFare: 440, totalFare: 1619, refundStatus: 0 },
"onwardFlights": [
            {
                "flightKey": "BLRHYD6E2662018-05-19HYDMAA6E7912018-05-19",
                "flights": [
                    {
                        "departureAirport": "BLR",
                        "departureTerminal": "",
                        "arrivalAirport": "HYD",
                        "arrivalTerminal": "",
                        "departureDateTime": "2018-05-19T06:10:00",
                        "arrivalDateTime": "2018-05-19T07:25:00",
                        "airline": "6E",
                        "flightNumber": "266",
                        "operatingAirline": "6E",
                        "stops": 0,
                        "equipment": "320 ",
                        "duration": 4500
                    },
                    {
                        "departureAirport": "HYD",
                        "departureTerminal": "",
                        "arrivalAirport": "MAA",
                        "arrivalTerminal": "",
                        "departureDateTime": "2018-05-19T08:35:00",
                        "arrivalDateTime": "2018-05-19T09:55:00",
                        "airline": "6E",
                        "flightNumber": "791",
                        "operatingAirline": "6E",
                        "stops": 0,
                        "equipment": "320 ",
                        "duration": 4800
                    }
                ],
                "priceSummary": [
                    {
                        "partnerName": "Cleartrip",
                        "baseFare": 440,
                        "totalFare": 2714,
                        "refundStatus": 1
                    }
                ]
            }
        ]
    }

pipes/keys.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'keys'})

    export class KeysPipe implements PipeTransform
    {
        transform(value:any, args:string[]): any {
            let keys:any[] = [];
            for (let key in value) {
                keys.push({key: key, value: value[key] });
            }
            return keys;
        }
    }

now i'm using nested loop in the view itself to display the flight list

flight-list.component.html

<div *ngFor="let flight of flightData.response | keys; let i = index">
    <div *ngFor="let flights of flight.value">
        <div class="row" *ngFor="let list of flights.flights; let first = first; let last = last;">
            <div class="col-md-8 flight-flow-details">
                <div class="flight-flow-details-bottom">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="text-light-small-light">{{ list.departureDateTime }}</div>
                            <div><span class="text-grey"> {{ list.departureAirport }}</span></div>
                        </div>
                        <div class="col-md-2">
                            <div class="flight-flow-details-arrow">→</div>
                        </div>
                        <div class="col-md-5">
                            <div class="text-light-small-light">{{ list.arrivalDateTime }}</div>
                            <div><span class="text-grey">{{ list.arrivalAirport }}</span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="text-light-small-light pad_top_10">{{ list.duration }} minutes | {{ list.stops }} stop</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

as you can see in above html code i'm using nested loops to display the flight data, i want to get rid of using pipes also in the view and move all the loops and data manupulation like sorting, filtering array in the flight-list.component.ts itself and then pass newly filtered array to the view but i'm struggling to do so, can someone please help

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.455318 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO