Angular 5 HTTPclient json error

Question

I am trying to import data from json file in my Angular 5 ionic project, but I cant because I am getting error : TS2339: property results does not exist on type 'Object' which is in home.ts (2 of them)

Provider : people.ts

  getPeople() {
    return this.http.get('http://www.json-generator.com/api/json/get/cghlMAGJvm?indent=10')
  }
}

home.ts

  constructor(public navCtrl: NavController,
              public service: People)
  {
    this.service.getPeople()

      .subscribe(
        data => this.people = data.results
      )
  }

  toggleReorder(){
    this.shouldReorder = !this.shouldReorder
  }
doRefresh(e){
this.service.getPeople()
  .subscribe(
    data => this.people.unshift(...data.results),
    err => console.log(err),
    () => e.complete()
  )
}
}

As I saw in angular/http guide there should be like that :

showConfig() {
  this.configService.getConfig()
    .subscribe(data => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

But I want to copy all the data not only few parts. What is the right way of doing it ?

also getting error in browser : ERROR Error: Uncaught (in promise): TypeError: this.service.getPeople(...).subscribe is not a function TypeError: this.service.getPeople(...).subscribe is not a function — Angulandy2
– Angulandy2, Commented Feb 10, 2018 at 15:54
Please give a minimal reproducible example. Also, I'd suggest you read angular.io/guide/http. — jonrsharpe
– jonrsharpe, Commented Feb 10, 2018 at 15:54
I copied only the parts where the 'results' is. The word 'results' comes twice and wrote another error which I see on the browsers. Both are in my code. No more, no less. And yes I saw the http guide of angular, did everything right. — Angulandy2
– Angulandy2, Commented Feb 10, 2018 at 15:58
You haven't done everything right, you haven't typed anything. Hence the compiler's complaint. — jonrsharpe
– jonrsharpe, Commented Feb 10, 2018 at 16:13

ChesterLaborde · Accepted Answer · 2018-02-10 20:52:18Z

1

On your people.ts add an import for the map operator.

import 'rxjs/add/operator/map';


getPeople() {
    return this.http.get('http://www.json-generator.com/api/json/get/cghlMAGJvm?indent=10').map(res => res.json());
}

The response given from http://www.json-generator.com/api/json/get/cghlMAGJvm?indent=10 is already the result, so no need to add data.results, that property doesn't exist on the response.

this.service.getPeople().subscribe( data => {
    this.people = data
});

answered Feb 10, 2018 at 20:52

ChesterLaborde

4585 silver badges14 bronze badges

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

3 Comments

Angulandy2 Over a year ago

Thank you, it really worked, but there is one more problem --> it works with : json-generator.com/api/json/get/cghlMAGJvm?indent=2 this json , but dont works with this I need : randomuser.me/api/?results=300 , why ?

Angulandy2 Over a year ago

error from browser : ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Angulandy2 Over a year ago

Fixed everything , thnx you again.

Collectives™ on Stack Overflow

Angular 5 HTTPclient json error

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related