Best way to display a list within a json object via Angular

user_10695731 0
Viewed 501

im trying to display the objects within a list within a json object via angular, but i can't really get it to work.

The json is delivered via a service as a resolved Promise:

getJson(): Promise<any> {
    return Promise.resolve(this.testdata);
}

Thus function returns an [object Promise]

The testdata json string is of structure:

{"errorCode":"ok",
 "objList":[{},{},etc.]
}

What i want is to display a list (for example with ngFor) and have access to the properties of the objects within the objList.

My initial idea was to just iterate over the object list with ngFor, to do this i created the following class

export class ExampleComponent implements OnInit {

json : {"objList": []}

constructor(
    private router: Router,
    public app: AppService,
    public pService: pService
) {
}

ngOnInit(){
    this.json = this.pService.getJson()
  }
}

This does not work however, as im getting the error that property objList is missing in type Promise<any>.

I also tried ngFor with KeyValue pipe, however it also didnt work properly.

I'd appreciate any help.

angular typescript frontend javascript
2 Answers

Can you please try this code snipped

    ngOnInit(){
    this.pService.getJson().
     then(response => {
       this.json = response;
     })
  }
user_65507320

the issue is that this.pService.getJson() returns a Promise reference. To learn more about Promise click here

So here is the fix you need to apply:

ngOnInit() {
  // you will need to implement the then call of the promise
  this.pService.getJson()
    .then((result) => {
      this.json = result;
      // then call the change detection, I will explain this below
      return this.cd.detectChanges();
    });
}

Additionally this may cause changeDetector issues for you so you may want to inject the ChangeDetectorRef in the component constructor

constructor(
    private router: Router,
    public app: AppService,
    public pService: Service,
    public cd: ChangeDetectorRef,
) {
}

This should sort you out, but i'd further advise reading more about promises and considering using Observable instead of Promise, check this link on Observable

user_77828820
Related