CODEWITHSUNDEEP
angularhttp
Eddie Taliaferro II
Eddie Taliaferro II

Reputation: 185

Getting Data from an API in Angular 4

I am in a bit of a pickle.

I have an api I am using: https://api.myjson.com/bins/1gb9tf

and an angular component here:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  results: string[];



  // Inject HttpClient into your component or service.
 constructor(private http: HttpClient) {}

 ngOnInit(): void {
   // Making the HTTP Request
   this.http
    .get('https://api.myjson.com/bins/1gb9tf')
    .subscribe(data => {
      // Read the result field from the JSON response.
      this.results = data['results'];
      console.log(data);
    })
 }

  title = 'app';
}

with the html being:

<!-- Search Form -->
<form class="" action="index.html" method="post">

  <h1> Let's Go. </h1>
  <hr>

  <select class="" name="">
    <option value="">Select means of Travel</option>
    <option value="">Flight</option>
  </select>

  <label for="Travel Start Date">Travel Start Date</label>
  <input type="date" name="" value="Travel Start Date">

  <label for="Travel End Date">Travel End Date</label>
  <input type="date" name="" value="Travel End Date">

  <select class="" name="">
    <option value="">Departure Location</option>
    <option value="">Atlanta</option>
  </select>

  <select class="" name="">
    <option value="">Arrival Location</option>
    <option value="">San Francisco</option>
  </select>

  <select class="" name="">
    <option value="">Product Class</option>
    <option value="">Economy</option>
  </select>

  <input style="width: 100px; background-color: green; color: #eef; height: 40px; border-radius: 50px; margin: 0 auto; margin-top: 50px;"
         type="submit" name="" value="Submit">

</form>

<!-- Results -->

<div class="result">
  {{ results }}
</div>

I am basically trying to pull in the data from the API, and display it in the input fields, ect. Mostly I just need help with looping through the array of objects in the api

Have a great day !

Upvotes: 3

Views: 7753

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222532

You need to use nested ngFor to display the results on your page, your results has two objects named searchCriteria and results, you need to loop over the results as follows,

 <ul>
    <li *ngFor="let group of displayItems">
    {{group.departure.city}}
    <ul>
        <li *ngFor="let flight of group.segments">
        {{flight.flightNumber}}
        </li>
    </ul>
    </li>
</ul>

DEMO

Upvotes: 5

iHazCode
iHazCode

Reputation: 771

Could you clarify a bit on where exactly your struggling? Are you suggesting that you are getting the payload on the client side, but need help extracting and parsing the data?

You appear to be on the right track, but just want to make sure we're on the same page before getting started.

Upvotes: 1

Related Questions