#Data loading in page load

4 messages · Page 1 of 1 (latest)

hard whale
#

I'm having some checkboxes in my component which is inside a @for directive for rendering according to data size. I have a function to retrieve the array which used inside the for directive as following,

getMenuList() {
    let apiResp = this.services.getMenus()
    apiResp.subscribe((resp:any)=>{
      this.menuList = resp
      if (this.menuList.response === 'success') {
        let apiresponse = JSON.stringify(this.menuList)
        let apiresponsefinal = JSON.parse(apiresponse)
        for (let index = 0; index < apiresponsefinal.ug_details.length; index++) {
          const element = apiresponsefinal.ug_details[index];
          let menuitem:dropLists = {dropid:element.menu_id,dropname:element.menu_name}
          this.menuValues.push(menuitem)
        }
      }
    })
  }

services is my API calling service as following,

getMenus():Observable<any>{
    return this.http.get('http://localhost:234/jeevadhara/api/v1/getmenus',{headers:{'auth_value':secret.auth_value}})
  }

As I'm using parent and child component based routing, components were loaded inside a div of parent component. Due to this child component is not refreshing the page, hence when I put the function calling in ngOnInit(), it will only trigger when I refresh the page.

How to call the function or define menuValues with proper values by calling services?

vernal obsidian
#

I think you are looking for something more rxjs based here, maybe instead of using a method, you can use the api and map the a new object, something in the following syntax.

public menuValues$ = this.service.getMenu().pipe(map((resp) => {
    return resp.ug_details.map((item) => ({ dropid: item.menu_id, dropname: item.menu_name }));
}));

This way within your @for directive, you can use the variable in the following way @for (item of menuValues$ | async; track item.dropid). Don't forget to import the import the asyncPipe in your typescript file.

hard whale
#

But still in child component load, variable is not initializing

sweet marsh