Отображение полученных данных из API - PullRequest
Новая
       37

Отображение полученных данных из API

0 голосов
/ 28 февраля 2019

Я получил данные из API и пытаюсь отобразить их в виде массива.Мне удалось зарегистрировать запрос данных и зарегистрировать их в консоли.

enter image description here

Я не смог отобразить их в массиве.

Это мой сервисный компонент: 

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



@Injectable({
  providedIn: 'root'
})
export class EarthquakeService {


  constructor(private http: HttpClient) {}

  getEarthquakes(){
    return this.http.get('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson');
  }


}

Это компонент моего приложения, в котором я запрашиваю данные: 

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

import {EarthquakeService} from '../../services/earthquake/earthquake.service';



@Component({
  selector: 'app-earthquake-page',
  templateUrl: './earthquake-page.component.html',
  styleUrls: ['./earthquake-page.component.scss']
})
export class EarthquakePageComponent implements OnInit {

  earthquakes: string[];
  eathqaukeTitle: string;

  constructor(private earthquakeService: EarthquakeService) {

  }

  ngOnInit() {
    this.getEarthqaukes();


  }

  getEarthqaukes(){
    this.earthquakeService.getEarthquakes().subscribe(
      (response) => console.log(response),
      (error) => console.log(error)
    );
  }

}

Теперь я не уверен, как сохранить эти данные в массив и отобразить их на странице.

1 Ответ

0 голосов
/ 28 февраля 2019

Я думаю, что вам не хватает некоторых частей при отправке запроса http на получение данных, попробуйте что-то вроде следующего.Запрос должен выглядеть примерно так, как показано ниже, JSON не очень хорошо работает на рисунке.

Запрос 

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';


public getEarthquakes(): Observable<any>{
    return this.http.get('http://earthquake.usgs.gov/
      earthquakes/feed/v1.0/summary/all_hour.geojson').pipe(map(data => data));
}

//only on two lines for SO readability

Компонент 

 public earthQuakes = [];    

  getEarthqaukes(){
  this.earthquakeService.getEarthquakes().subscribe(
    (response) => {
       console.log(response)
       this.earthQuakes = response.features; // whichever bit you are looking for.
  },
  (error) => console.log(error)
  );
}

HTML 

<div *ngFor="let shake of earthQuakes">
  <span>{{shake}}</span>
</div>

Документация по использованию * ngFor .

Это не идеально, поскольку упомянутое не может видеть полный текстХорошо, но этого должно быть достаточно, чтобы заполнить пробелы.Как уже упоминалось в комментариях в голову , вы должны просмотреть этот учебник , чтобы убедиться, что вы понимаете, что вы делаете, когда вы изучаете.

...