Get data from JSON with Angular2 Promise

Question

I'm trying to get data from a JSON file following the http tutorial from the Angular2 documentation:

Service:

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Hero } from './hero';

private heroesUrl = 'app/heroes';  // URL to web api

constructor(private http: Http) { }

getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
}

Component:

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'my-app',
  template: // some template,
  styles: // some style,
  providers: [HeroService]
})

export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => {
        this.heroes = heroes;
        console.log('heroes', this.heroes);
    });
  }

  ngOnInit(): void {
    this.getHeroes();
  }
}

Model:

export class Hero {
  constructor(
    public id: number,
    public name: string,
    public power: string,
    public alterEgo?: string
  ) {  }
}

I replaced private heroesUrl = 'app/heroes'; with my endpoint that is a JSON file (private heroesUrl = 'app/mockups/heroes.json';), that contains data according to hero model.

But when i run my app i get no data and there is any error message. Isn't my code correct?

Where do you not get data? Can you please add a console.log(data); in the code in your question where you expect data (or whatever name) you expect to have a value? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 5, 2016 at 9:20
I don't understand the question. Where do you expect what variable to have a value? To debug it you can add a console.log(...) line. This allows you to investigate yourself and allows us to see what you expect. I can't answer your question when I don't know what you expect to happen. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 5, 2016 at 9:33
I expect to have data in heroes variable. How to add console.log(data) in getHeroes() function? — smartmouse
– smartmouse, Commented Sep 5, 2016 at 9:49
I solved. The problem was that the JSON object must start with a property that has the same name of response.json().data. So i renamed the first property to data. Please upvote this comment so other members can see it. — smartmouse
– smartmouse, Commented Sep 5, 2016 at 12:09

smartmouse · Accepted Answer · 2017-08-11 18:16:20Z

3

The solution is that the JSON object must start with a property that has the same name of response.json().data.

Renaming the first property to data does the job.

answered Aug 11, 2017 at 18:16

smartmouse

14.5k35 gold badges108 silver badges181 bronze badges

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

Collectives™ on Stack Overflow

Get data from JSON with Angular2 Promise

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related