Populate model with JSON data in Angular

Question

I have a class with a model like this:

model = new questions(
                      1,                       // Id
                      '',                      // Name
                      '',                      // LastName
                      'undefined',             // Gender
                      'undefined',             // Filling Status
                      ...
)

The I have a service that makes a GET request to an API, and the response is like this:

{
"id": "5b6f",
"name": "John",
"lastName": "Doe",
"gender": "Male",
"fillingStatus": "Single",
 ...
}

How can I populate the model with this response, should I iterate to the object?

Thanks for your help!

what's the class look like? in your example it looks like you're showing us an instance of a 'questions' class. — Dream_Cap
– Dream_Cap, Commented Aug 11, 2018 at 22:44

halfer · Accepted Answer · 2018-08-14 21:40:13Z

1

Angular have a very good tutorial on this exact theme.

https://angular.io/guide/dynamic-form

This uses reactive forms.

If you are not familiar with reactive forms you might want to do these tutorials first:

https://angular.io/guide/reactive-forms

https://angular.io/guide/form-validation

Basically, in the dynamic form tutorial, an HTTP request is made to the server to get form data using a service.

(the tutorial actually uses hardcoded data in a service but it is easy to swap this out for an HTTP request)

Once the data is retrieved it used to dynamically generate a reactive form.

The questions are then iterated to render the view and to render suitable form controls. The view hooks into the reactive form. You won't find a better tutorial.

edited Aug 14, 2018 at 21:40

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 12, 2018 at 0:12

danday74

58k56 gold badges273 silver badges337 bronze badges

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

Comments

Willem van der Veen · Accepted Answer · 2018-08-11 22:46:07Z

0

Use the spread operator like this:

let json = {
"id": "5b6f",
"name": "John",
"lastName": "Doe",
"gender": "Male",
"fillingStatus": "Single",
}

const model = {...json}

console.log(model);

Keep in mind that this is new syntax and not all browsers might support this syntax. So it is smart to transpile this code to ES5 syntax using babel.

answered Aug 11, 2018 at 22:46

Willem van der Veen

37k19 gold badges208 silver badges177 bronze badges

Collectives™ on Stack Overflow

Populate model with JSON data in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related