Angular 2/4 : Assign array value from promise function in service layer to a variable in component

I am calling post function in service layer using Promise which returns me a JSONArray . I am able to fetch it in components layer but unable to assign to a variable .

What i tried is :

config;





ngOnInit() {

    this.dataService.getTemplateData(this.templateId).then(result => this.config = result)

          .catch(error => console.log(error));

  }



:: result is printing jsonArray properly

I get following error in console.

AppComponent.html:34 ERROR TypeError: Cannot read property 'forEach' of undefined

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.ngOnInit (dynamic-form.component.ts:19)

    at checkAndUpdateDirectiveInline (core.es5.js:10843)

    at checkAndUpdateNodeInline (core.es5.js:12341)

    at checkAndUpdateNode (core.es5.js:12284)

    at debugCheckAndUpdateNode (core.es5.js:13141)

    at debugCheckDirectivesFn (core.es5.js:13082)

    at Object.eval [as updateDirectives] (AppComponent.html:34)

    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)

    at checkAndUpdateView (core.es5.js:12251)

What I'm expecting is :

config = [

    {

      "type": "input",

      "label": "Full name",

      "name": "name",

      "placeholder": "Enter your name"

    },

    {

      "type": "select",

      "label": "Favourite food",

      "name": "food",

      "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],

      "placeholder": "Select an option"

    },

    {

      "label": "Submit",

      "name": "submit",

      "type": "button"

    },

  ];

Following is my .html logic :-

  <div class="app">

            <dynamic-form [config]="config">

            </dynamic-form>

  </div>

My Service Layer :

getTemplateData(data:any): Promise {

let headers = new Headers({ 'Content-Type': 'application/json' });

let options = new RequestOptions({ headers: headers });

return this.http

        .post(this.templateDataUrl, data, options)

    .toPromise()

    .then(this.extractData)

    .catch(this.handleError);

}



 private extractData(res: Response) {

    let body = res.json();

    return body || {};

}

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

The error is in your html for that component, can you please add it to the question. AppComponent.html:34

– Zze
Jan 2 at 5:19

Please console log result and show it.

– Arcteezy
Jan 2 at 5:32

I have included my html and service layer content in the question

– Puneet Bhardwaj
Jan 3 at 7:54

You have an error on your app.component.ts. Please include the code that contains the forEach

– veben
Jan 3 at 8:01

that error comes to me when i assign my result jsonArray to config as shared in the above code

– Puneet Bhardwaj
Jan 3 at 9:04

add a comment |

I am calling post function in service layer using Promise which returns me a JSONArray . I am able to fetch it in components layer but unable to assign to a variable .

What i tried is :

config;





ngOnInit() {

    this.dataService.getTemplateData(this.templateId).then(result => this.config = result)

          .catch(error => console.log(error));

  }



:: result is printing jsonArray properly

I get following error in console.

AppComponent.html:34 ERROR TypeError: Cannot read property 'forEach' of undefined

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.ngOnInit (dynamic-form.component.ts:19)

    at checkAndUpdateDirectiveInline (core.es5.js:10843)

    at checkAndUpdateNodeInline (core.es5.js:12341)

    at checkAndUpdateNode (core.es5.js:12284)

    at debugCheckAndUpdateNode (core.es5.js:13141)

    at debugCheckDirectivesFn (core.es5.js:13082)

    at Object.eval [as updateDirectives] (AppComponent.html:34)

    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)

    at checkAndUpdateView (core.es5.js:12251)

What I'm expecting is :

config = [

    {

      "type": "input",

      "label": "Full name",

      "name": "name",

      "placeholder": "Enter your name"

    },

    {

      "type": "select",

      "label": "Favourite food",

      "name": "food",

      "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],

      "placeholder": "Select an option"

    },

    {

      "label": "Submit",

      "name": "submit",

      "type": "button"

    },

  ];

Following is my .html logic :-

  <div class="app">

            <dynamic-form [config]="config">

            </dynamic-form>

  </div>

My Service Layer :

getTemplateData(data:any): Promise {

let headers = new Headers({ 'Content-Type': 'application/json' });

let options = new RequestOptions({ headers: headers });

return this.http

        .post(this.templateDataUrl, data, options)

    .toPromise()

    .then(this.extractData)

    .catch(this.handleError);

}



 private extractData(res: Response) {

    let body = res.json();

    return body || {};

}

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

The error is in your html for that component, can you please add it to the question. AppComponent.html:34

– Zze
Jan 2 at 5:19

Please console log result and show it.

– Arcteezy
Jan 2 at 5:32

I have included my html and service layer content in the question

– Puneet Bhardwaj
Jan 3 at 7:54

You have an error on your app.component.ts. Please include the code that contains the forEach

– veben
Jan 3 at 8:01

that error comes to me when i assign my result jsonArray to config as shared in the above code

– Puneet Bhardwaj
Jan 3 at 9:04

add a comment |

I am calling post function in service layer using Promise which returns me a JSONArray . I am able to fetch it in components layer but unable to assign to a variable .

What i tried is :

config;





ngOnInit() {

    this.dataService.getTemplateData(this.templateId).then(result => this.config = result)

          .catch(error => console.log(error));

  }



:: result is printing jsonArray properly

I get following error in console.

AppComponent.html:34 ERROR TypeError: Cannot read property 'forEach' of undefined

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.ngOnInit (dynamic-form.component.ts:19)

    at checkAndUpdateDirectiveInline (core.es5.js:10843)

    at checkAndUpdateNodeInline (core.es5.js:12341)

    at checkAndUpdateNode (core.es5.js:12284)

    at debugCheckAndUpdateNode (core.es5.js:13141)

    at debugCheckDirectivesFn (core.es5.js:13082)

    at Object.eval [as updateDirectives] (AppComponent.html:34)

    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)

    at checkAndUpdateView (core.es5.js:12251)

What I'm expecting is :

config = [

    {

      "type": "input",

      "label": "Full name",

      "name": "name",

      "placeholder": "Enter your name"

    },

    {

      "type": "select",

      "label": "Favourite food",

      "name": "food",

      "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],

      "placeholder": "Select an option"

    },

    {

      "label": "Submit",

      "name": "submit",

      "type": "button"

    },

  ];

Following is my .html logic :-

  <div class="app">

            <dynamic-form [config]="config">

            </dynamic-form>

  </div>

My Service Layer :

getTemplateData(data:any): Promise {

let headers = new Headers({ 'Content-Type': 'application/json' });

let options = new RequestOptions({ headers: headers });

return this.http

        .post(this.templateDataUrl, data, options)

    .toPromise()

    .then(this.extractData)

    .catch(this.handleError);

}



 private extractData(res: Response) {

    let body = res.json();

    return body || {};

}

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

I am calling post function in service layer using Promise which returns me a JSONArray . I am able to fetch it in components layer but unable to assign to a variable .

What i tried is :

config;





ngOnInit() {

    this.dataService.getTemplateData(this.templateId).then(result => this.config = result)

          .catch(error => console.log(error));

  }



:: result is printing jsonArray properly

I get following error in console.

AppComponent.html:34 ERROR TypeError: Cannot read property 'forEach' of undefined

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.ngOnInit (dynamic-form.component.ts:19)

    at checkAndUpdateDirectiveInline (core.es5.js:10843)

    at checkAndUpdateNodeInline (core.es5.js:12341)

    at checkAndUpdateNode (core.es5.js:12284)

    at debugCheckAndUpdateNode (core.es5.js:13141)

    at debugCheckDirectivesFn (core.es5.js:13082)

    at Object.eval [as updateDirectives] (AppComponent.html:34)

    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)

    at checkAndUpdateView (core.es5.js:12251)

What I'm expecting is :

config = [

    {

      "type": "input",

      "label": "Full name",

      "name": "name",

      "placeholder": "Enter your name"

    },

    {

      "type": "select",

      "label": "Favourite food",

      "name": "food",

      "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],

      "placeholder": "Select an option"

    },

    {

      "label": "Submit",

      "name": "submit",

      "type": "button"

    },

  ];

Following is my .html logic :-

  <div class="app">

            <dynamic-form [config]="config">

            </dynamic-form>

  </div>

My Service Layer :

getTemplateData(data:any): Promise {

let headers = new Headers({ 'Content-Type': 'application/json' });

let options = new RequestOptions({ headers: headers });

return this.http

        .post(this.templateDataUrl, data, options)

    .toPromise()

    .then(this.extractData)

    .catch(this.handleError);

}



 private extractData(res: Response) {

    let body = res.json();

    return body || {};

}

javascript angular

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

edited Jan 3 at 7:54

asked Jan 2 at 5:10

Puneet Bhardwaj

124

asked Jan 2 at 5:10

Puneet Bhardwaj

124

asked Jan 2 at 5:10

Puneet Bhardwaj

124

The error is in your html for that component, can you please add it to the question. AppComponent.html:34

– Zze
Jan 2 at 5:19

Please console log result and show it.

– Arcteezy
Jan 2 at 5:32

I have included my html and service layer content in the question

– Puneet Bhardwaj
Jan 3 at 7:54

You have an error on your app.component.ts. Please include the code that contains the forEach

– veben
Jan 3 at 8:01

that error comes to me when i assign my result jsonArray to config as shared in the above code

– Puneet Bhardwaj
Jan 3 at 9:04

add a comment |

The error is in your html for that component, can you please add it to the question. AppComponent.html:34

– Zze
Jan 2 at 5:19

Please console log result and show it.

– Arcteezy
Jan 2 at 5:32

I have included my html and service layer content in the question

– Puneet Bhardwaj
Jan 3 at 7:54

You have an error on your app.component.ts. Please include the code that contains the forEach

– veben
Jan 3 at 8:01

that error comes to me when i assign my result jsonArray to config as shared in the above code

– Puneet Bhardwaj
Jan 3 at 9:04

The error is in your html for that component, can you please add it to the question. AppComponent.html:34

– Zze
Jan 2 at 5:19

Please console log result and show it.

– Arcteezy
Jan 2 at 5:32

I have included my html and service layer content in the question

– Puneet Bhardwaj
Jan 3 at 7:54

You have an error on your app.component.ts. Please include the code that contains the forEach

– veben
Jan 3 at 8:01

that error comes to me when i assign my result jsonArray to config as shared in the above code

– Puneet Bhardwaj
Jan 3 at 9:04

add a comment |

2 Answers
2

active

oldest

votes

Initialising config variable properly, I was able to assign data to the parameter

config: any = ;

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

add a comment |

Please share the complete code of dynamic-form.component. it will be easy to trace the issue.

DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

on the above line, config is undefined that's why it's throwing an error
u should call a creatGroup() method like this

 this.dataService.getTemplateData(this.templateId).then(result => {

    this.config = result;

    this.creatGroup()

}).catch(error => console.log(error));

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001487%2fangular-2-4-assign-array-value-from-promise-function-in-service-layer-to-a-var%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Initialising config variable properly, I was able to assign data to the parameter

config: any = ;

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

add a comment |

Initialising config variable properly, I was able to assign data to the parameter

config: any = ;

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

add a comment |

Initialising config variable properly, I was able to assign data to the parameter

config: any = ;

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

Initialising config variable properly, I was able to assign data to the parameter

config: any = ;

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

edited Jan 5 at 6:12

Prashant Pimpale

3,61031035

answered Jan 5 at 5:10

Puneet Bhardwaj

124

answered Jan 5 at 5:10

Puneet Bhardwaj

124

answered Jan 5 at 5:10

Puneet Bhardwaj

124

add a comment |

Please share the complete code of dynamic-form.component. it will be easy to trace the issue.

DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

on the above line, config is undefined that's why it's throwing an error
u should call a creatGroup() method like this

 this.dataService.getTemplateData(this.templateId).then(result => {

    this.config = result;

    this.creatGroup()

}).catch(error => console.log(error));

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

add a comment |

Please share the complete code of dynamic-form.component. it will be easy to trace the issue.

DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

on the above line, config is undefined that's why it's throwing an error
u should call a creatGroup() method like this

 this.dataService.getTemplateData(this.templateId).then(result => {

    this.config = result;

    this.creatGroup()

}).catch(error => console.log(error));

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

add a comment |

Please share the complete code of dynamic-form.component. it will be easy to trace the issue.

DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

on the above line, config is undefined that's why it's throwing an error
u should call a creatGroup() method like this

 this.dataService.getTemplateData(this.templateId).then(result => {

    this.config = result;

    this.creatGroup()

}).catch(error => console.log(error));

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

Please share the complete code of dynamic-form.component. it will be easy to trace the issue.

DynamicFormComponent.createGroup (dynamic-form.component.ts:24)

on the above line, config is undefined that's why it's throwing an error
u should call a creatGroup() method like this

 this.dataService.getTemplateData(this.templateId).then(result => {

    this.config = result;

    this.creatGroup()

}).catch(error => console.log(error));

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

edited Jan 5 at 6:13

Prashant Pimpale

3,61031035

answered Jan 2 at 5:52

Ajay Barokar

862

answered Jan 2 at 5:52

Ajay Barokar

862

answered Jan 2 at 5:52

Ajay Barokar

862

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

add a comment |

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

Refer the added html and service layer in my question i just edited . If you need any other file code , ill share . thank you

– Puneet Bhardwaj
Jan 3 at 7:58

Can you please share the code for dynamic-form.component.ts anf dynamic-form.component.html file?

– Ajay Barokar
Jan 4 at 8:12

Well , Issue solved . I properly initialised "config" and now i am able to assign. Thanks for help everybody

– Puneet Bhardwaj
Jan 5 at 5:09

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu