Getting Data from an API in Angular 4

Question

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 !

Sajeetharan · Accepted Answer · 2018-01-06 03:21:11Z

5

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

answered Jan 6, 2018 at 3:21

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eddie Taliaferro II Over a year ago

Thank you very, very much this is exactly what I needed to learn. Good Vibez to ya man !

Sajeetharan Over a year ago

Mark as answer if this helped

iHazCode · Accepted Answer · 2018-01-06 02:51:04Z

1

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.

answered Jan 6, 2018 at 2:51

iHazCode

7715 silver badges15 bronze badges

2 Comments

Eddie Taliaferro II Over a year ago

Yes, I need help extracting / parsing the data. The best i can do with what I know right now is returning the 'return' array with all the objects but I have no clue what to do after that smh

iHazCode Over a year ago

Please see Sajeetharan's answer above. He has included a technique you could use for parsing the payload in your template file. However if you need to find a different approach let me know. Good luck.

Collectives™ on Stack Overflow

Getting Data from an API in Angular 4

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related