Question 109032 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

I have my code but is not fetching the data from my json file

I have my code but is not fetching the data from my JSON file I keep getting 0 arguments to wonder what I am doing wrong on my code can someone help I am using angular for this project.

I have my code but is not fetching the data from my JSON file I keep getting 0 arguments to wonder what I am doing wrong on my code can

Code

import { Component } from '@angular/core';
import { Flight } from './flight';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  [x: string]: any;

  url: string = '/assets/data/flights.json';

  Constructor(){
    this.getFlights();
  }

  allArrivals: Flight[] = [];
  allDepartures: Flight [] = [];
  filteredArrivals: Flight []=[];
  filteredDepartures: Flight [] = [];

  arrivalText: string = "arrival";
  departureText: string = "departure";

  showArrivals: boolean = true;


  getFlights(): void {
    // fetch flight data from JSON file
    fetch(this.url).then((res) => {
      res.json().then((json) => {
        // for each flight in the JSON data, create a new Flight instance
        json.forEach((flight: any) => {
          let newFlight = new Flight(flight.airline, flight.flightNo, flight.origin, flight.departure, flight.destination, flight.arrival);
          newFlight.gate = flight.gate;
          newFlight.status = flight.status;


          // check if the destination includes "Chattanooga" and add to corresponding array
          if (newFlight.destination.includes("Chattanooga")) {
            this.allArrivals.push(newFlight);
          } else {
            this.allDepartures.push(newFlight);
          }
        });
    

        // set the filtered arrays to the all arrays
        this.filteredArrivals = [...this.allArrivals];
        this.filteredDepartures = [...this.allDepartures];
      });

    });

  }

  filterFlights(keyword: string): void {
      keyword = keyword.toLowerCase();
      let matchingArrivals: Flight[] = [];
      for(let i=0; i < this.allArrivals.length; i++) {
          let flight = this.allArrivals[i];
          let flightInfo = (flight.airline + flight.flightNo + flight.origin + flight.status).toLowerCase();
          if (flightInfo.indexOf(keyword) >= 0) {
              matchingArrivals.push(flight);
          }
      }
      this.filteredArrivals = [...matchingArrivals];
      let matchingDepartures: Flight[] = [];
      for(let i=0; i < this.allDepartures.length; i++) {
          let flight = this.allDepartures[i];
          let flightInfo = (flight.airline + flight.flightNo + flight.destination + flight.status).toLowerCase();
          if (flightInfo.indexOf(keyword) >= 0) {
              matchingDepartures.push(flight);
          }
      }
      this.filteredDepartures = [...matchingDepartures];
  }

  resetFlights(): void {
      this.filteredArrivals = [...this.allArrivals];
      this.filteredDepartures = [...this.allDepartures];
  }

}

export class Flight {
  airline: string;
  flightNo: string;
  origin: string;
  departure: string;
  destination: string;
  arrival: string;
  gate: string;
  status: string;

  constructor(airline: string, flightNo: string, origin: string, departure: string,
        destination: string, arrival: string ){
    this.airline = airline;
    this.flightNo = flightNo;
    this.origin = origin;
    this.departure = departure;
    this.destination = destination;
    this.arrival = arrival;
    this.gate = "";
    this.status = "";

  }
    
  isCancelled(): boolean {
    return this.status.toLowerCase() === "cancelled";
  }
        
  isDelayed(): boolean {
    return this.status.toLowerCase() === "delayed";
  }
        
  getImage(): string {
    let basePath = "/assets/images/";
    if (this.airline === "American") {
        return basePath + "aa-logo.png";
    } else if (this.airline === "Delta") {
        return basePath + "delta-logo.png";
    } else if (this.airline === "United") {
        return basePath + "united-logo.png";
    }
    return "";
  }
     
}
Tags:

2

Answers


  1. 0

    In your AppComponent you have a method named Constructor() which is not called. You probably meant to make this the class constructor with a lowercase c

    class Foo{
    constructor(){
        console.log('class constructor')
    }

    Constructor(){
        console.log('Constructor method, not called!')
    }
}

const x = new Foo();
    Login or Signup to reply.
  2. 0

    You need to use ngOnInit() function!
    Your request is in constructor()…

    The constructor() is the first element executed in a class, and that is one of the reasons angular 2 was created, angularJS have this problem, with ngOnInit() you can manipulate the sequence of your code.

    Please read about ` component life cycle, is very important to know this concept in profound, otherwise, you will have several issues when your application grows.

    import {OnInit, etc, etc, etc, } from '@angular/core';

export class AppComponent implements OnInit {

      constructor() {}

      ngOnInit() {
         this.getFlights();
      }

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search