Angular 2 Dashboard application web api call at initialization

Question

I have a dashboard application written in angular 2. I am using api call for the the data. After retrieving the data I render them in the graph. As the demo link below. When I make a api call from ngOnInit() method of dashboardcomponent I get null response but if I do same thing using a button click event all data loads as expected. What is the best place/initiate to make a api call and populate all the data in UI at the first load itself?

http://preview.themeforest.net/item/avenxo-responsive-angularjs-html-admin/full_screen_preview/11660185?ref=cirvitis&clickthrough_id=1107952073&redirect_back=true

can you share code what u tried ? – Chandru Oct 19 '17 at 17:50 — Chandru, Oct 19 '17 at 17:50

score 0 · Answer 1 · answered Oct 19 '17 at 17:58

0

To build your application in the way the Angular team intended would mean putting any API calls into an injectable service. Check out @Injectable. From there you would inject the service into any component or directive that needs to make the API calls.

Also, the API calls are likely async which may be part of the reason you are getting null. These must be handled in Observables or Promises/Callbacks.

answered Oct 19 '17 at 17:58

rjustin

1,399
8
19

I used observable and @inject able service to load data. My question here is where should I make the api call so that everything renders well when I make api call from the ngOnInit() method its coming null. There is no problem with api response. I think UI thread does not like to wait to get for the api response. – tksdotnet1 Oct 19 '17 at 18:19
@tksdotnet1 If you post some code we may be able to help you more. I have found that making API calls in either the constructor or the ngOnInit(preferred from design perspective) works well. The data will be null until the async call completes. Are you using the subscribe() function? – rjustin Oct 19 '17 at 18:28

score 0 · Accepted Answer · answered Oct 20 '17 at 19:23

ngOnInit() was ok to make the api call. I didn't have clear picture of subscribe function . I had to do couple of complex calculation in my typescript file before rendering in the UI. I should be doing this in the subscribe method only. not to assign with a global variable and do a dot operator and expect things to work like charm. I found that until you have listener subscribe does not hold data for your. Meaning if you have large json with nested elements you have to do this.data.innerdata[0].finalvalue[0] in the subscribe method instead pass that to method and do all the fun stuffs.

Pass your information to initData(data) and do all calculation and do the rendering.

export class Recent implements OnInit{
allFiles;
public allFiles_error:Boolean = false;
openModalWindow:boolean=false;
images = [];
currentImageIndex:number;
opened:boolean=false;
imgSrc:string;

constructor(private _recentService: RecentService) { }

ngOnInit() {
    this._recentService.getJson().subscribe(
        data => initData(data),
        err => handleError(),
        () => console.log('Completed!'));
}

initData(data){
    this.allFiles = data;
    console.log("allFiles: ", this.allFiles);
    console.log(this.allFiles.length);
    for(var i = 0; i < this.allFiles.length; i++) {
        this.images.push({
        thumb: this.allFiles[i].url,
        img: this.allFiles[i].url,
        description: "Image " + (i+1)
        });
    }
    console.log("Images: ", this.images);
    console.log(this.images.length);
    console.log(this.images);
    console.log(typeof this.images);
}

handleError() {
    this.allFiles_error = true;
}

}

Angular 2 Dashboard application web api call at initialization

2 Answers2