Angularjs 4 HTTP Get request to json file

Question

I have the folowing problem, i cant load the data from json. What I'm trying to do is access the given file address and spell the data but something does not load I tried and without async

driver-list.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/throw';

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';


@Injectable()
export class DriversListService {

  private baseUrl: string = 'http://ergast.com/api/f1/2016/driverStandings.json';
  constructor(private http : Http){}
  data  
  getDriver() {
    return this.http.get(this.baseUrl)
    .map(res => this.data = res.json())
  }
}

drivers-list-page.component.ts

import { Component, OnInit } from '@angular/core';
import { DriversListService } from '../drivers-list-page/drivers-list.service'

@Component({
  selector: 'app-drivers-list-page',
  templateUrl: './drivers-list-page.component.html',
  styleUrls: ['./drivers-list-page.component.sass']
})
export class DriversListPageComponent implements OnInit {

  drivers = []
    constructor(private driverListServices: DriversListService) {}
    ngOnInit(){
      this.driverListServices.getDriver().subscribe(resDriverData=>this.drivers=resDriverData)
    }
}

drivers-list-page.component.html

WORK
    <ul class="items">
       <li *ngFor="let driver of drivers | async">
          <span>{{driver}}</span>
       </li>
    </ul>

enter image description here

Have you find any solution?

kamal kokne
– kamal kokne

2017-11-23 08:40:20 +00:00
Commented Nov 23, 2017 at 8:40 — kamal kokne
– kamal kokne, Commented Nov 23, 2017 at 8:40

Mohamed Baddi · Accepted Answer · 2017-09-01 17:31:22Z

Check the console log, to know more about the error... then we can help you exactly

or try ...

    import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { environment } from '../../environments/environment';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-searcher',
  templateUrl: './searcher.component.html',
  styleUrls: ['./searcher.component.css']
})
@Injectable()
export class SearcherComponent implements OnInit {

  // Pixabay API Key
  private key:string = environment.PIXABAY_API_Key;
  // API Url
  url:string;
  // Array of result
  images:any[];
  // Result per page
  per_page:number;
  // User query
  query:string;

  constructor(private result: Http) { 
  }

  ngOnInit() {
  }

  // Get http result
  letSearch(query){
    this.url = "https://pixabay.com/api/?key=" + this.key + "&q=" + query;
    return this.result.get(this.url).map(res => res.json()).subscribe(
      data => console.log(data),
      error => console.log(error),
      () => console.log("Fine !")
    );
  }

}

Collectives™ on Stack Overflow

Angularjs 4 HTTP Get request to json file

driver-list.service.ts

drivers-list-page.component.ts

drivers-list-page.component.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

driver-list.service.ts

drivers-list-page.component.ts

drivers-list-page.component.html

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related