Unable to make http service call in Angular2?

Question

Hi I am developing web application in Angular 5. I am generating tree like structure. I am following https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/async/async.component.ts. I am making API call to get data dynamically and display as tree. My approach works fine with static data but it wont work with dynamic data getting after making http call.

Below code works with static data.

asyncChildren = [
    {
      name: 'child1',
      hasChildren: true
    }, {
      name: 'child2'
    }
  ];

 getChildren(node: any) {
    const newNodes = this.asyncChildren.map((c) => Object.assign({}, c));

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

In the above code when I call service instead of this.asyncChildren my code will not work. Below is my implementation.

getChildren(node: any) {
    const newNodes =  this.ChildTranslator().map((c) => Object.assign({}, c));
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

Above method will be called whenever there are child nodes. So Instead of this.asyncChildren I am making call to this.ChildTranslator method which make http service call and get JSON and convert the data in the required format. Below is the implementaion of ChildTranslator method.

 public string ChildTranslator(){
    this.nodeservice.GetChildNodes().subscribe(data=>{
    this.asyncChildren= this.transformer(data);
    return this.asyncChildren;
    });
}

The transformer code.

  public string transformer(data:any){

    this.asyncChildren=[];
    let results=data;
    for (const key in results) {
      if (results[key] instanceof Array) {
        const containerTyp2 = {name: '', hasChildren: false,};

        containerTyp2.name = key;
        containerTyp2.hasChildren = true;

        this.asyncChildren.push(containerTyp2);
     } else {
        const object = {name: ''};

        const containerTyp1 = {name: '', children: []};
        object.name = results[key];
        containerTyp1.name = key;
        containerTyp1.children.push(object);
        this.asyncChildren.push(containerTyp1);
    }
    this.tree.treeModel.update();
  }
return this.asyncChildren;
  }

Above piece of code pops me the below error.

Cannot read property 'map' of undefined

Can someone help me to make this work? May I know what I am missing in the above code? Any help would be greatly appreciated. Thank you.

ChildTranslator() does not return a value.

ibenjelloun
– ibenjelloun

2018-07-25 06:37:33 +00:00
Commented Jul 25, 2018 at 6:37 — ibenjelloun
– ibenjelloun, Commented Jul 25, 2018 at 6:37

SoroushNeshat · Accepted Answer · 2018-07-25 06:41:47Z

1

try this :

getChildren(node: any) {

    return new Promise((resolve, reject) => {
        this.nodeservice.GetChildNodes().subscribe(data=>{
            this.asyncChildren= this.transformer(data);
            const newNodes =  this.asyncChildren.map((c) => Object.assign({}, c));
            setTimeout(() => resolve(newNodes), 1000);
        });        
    });
}

answered Jul 25, 2018 at 6:41

SoroushNeshat

6745 silver badges11 bronze badges

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

7 Comments

SoroushNeshat Over a year ago

@Niranjan anytime

Niranjan Over a year ago

But only problem is it is keep calling getChildren method thousand times.

SoroushNeshat Over a year ago

@Niranjan what keeps calling getChildren ?

Niranjan Over a year ago

this.asyncChildren= this.transformer(data); this is keep on calling. I have posted implementation above.

SoroushNeshat Over a year ago

@Niranjan where do u invoke getChildren method ?

|

Niladri Basu · Accepted Answer · 2018-07-25 06:42:09Z

1

Change your getChildren method like this:

getChildren(node: any) {
    const newNodes =  this.ChildTranslator().subscribe(data=>{
    this.asyncChildren= this.transformer(data);
    this.asyncChildren.map((c) => Object.assign({}, c));
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
   });
  }

Also, return value from ChildTranslator method like this:

 public string ChildTranslator(){
    return this.nodeservice.GetChildNodes();
}

answered Jul 25, 2018 at 6:42

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

Collectives™ on Stack Overflow

Unable to make http service call in Angular2?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related