How to assign data from service to JSON?

Question

I am making angular 6 application, where i am making a angular dynamic form in which the data comes as dynamic from JSON.

JSON:

  jsonData: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    },
    {
      "elementType": "dropdown",
      "key": 'project',
      "label": 'Project Rating',
      "options": [
        { "key": 'average', "value": 'Average' },
        { "key": 'good', "value": 'Good' },
        { "key": 'great', "value": 'Great' }
      ],
      "order": 3
    }
  ];

Here in dropdown, i would like to have the options array from the service call..

As of now you could able to see that i have hard coded it in options..

Service in dynamic-form.component.ts:

  getDropdownValues(url,token) {
    this.service.get(url,token).subscribe(res => {
      console.log(res.data);
    });
  }

res.data returns the following,

  {
    data: [
        { "key": 'average', "value": 'Average' },
        { "key": 'good', "value": 'Good' },
        { "key": 'great', "value": 'Great' }
    ]
  }

This data array is going to be the options in JSON..

As of now i have given the JSON inside .ts file but later it will be a separate .json file.

The working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-ng8m4z

Kindly help me to place the data comes from service (res.data) to the dropdown options inside JSON..

At the moment, `jsonData` is an array. Will the `options` always be in the 3rd object, or do you need to look for it? — user184994, Nov 12 '18 at 11:30
@user184994, No the order may change at any time.. Everything will change at anytime but for options array the res.data values will be placed.. — Maniraj Murugan, Nov 12 '18 at 11:31
You can use `jsonData.find(d => d.elementType === "dropdown").options` to get the options array from `jsonData` — user184994, Nov 12 '18 at 11:44
@user184994, I am new in angular.. It would be helpful for me if you elobrate it as answer with stackblitz.. — Maniraj Murugan, Nov 12 '18 at 11:48

score 1 · Accepted Answer · answered Nov 12 '18 at 14:19

you must ask yourself about what data you receive and what data do you need. In general you can has,e.g.

getOptions():Observable<any[]>
{
   //of, create an observable
   return of(
     [{key:"option1",data:["option1_1","option_1_2"]},
      {key:"option2",data:["option2_1","option_2_2","option_2_3]},..
     ])
}

getModel():Observable<any[]>
{ 
  return of(
            [{key:"option1",...},
             {key:"option2",..}
     ])
}

You must use switchMap to received the fullModel. switchmap make that you don't receive the first call else the inner one. is a way to not encatenate subscribe

getFullMode():Observable<any[]>
{
     return getOptions().pipe(switchMap(
        opts=>{
           return getModel().pipe(map(mod=>{
             //..here transform "mod" using the values of opts
             //e.g.
             let option=opts.find(p=>p.key=mod.key);
             mod.options=option.data
           }))
        })
     )
}

Well, you case is easer because only has an "option" and a unique "option", anf json is fixed.

getFullJson(url,token) 
{
    this.service.get(url,token).pipe(map(opt=>{
      //we don't want return opt, else this.jsonData transformed.
      let element=this.jsonData.find(e=>e.elementType=='dropdown');
      if (element)
         element.option=res.data
      return this.jsonData
    }))
  }).subscribe(res=>console.log(res));

If your json comes from an observable, not use map, use switchmap. SwitchMap, wait the outer call end to make the second

getFullJson(url,token) {
    this.service.get(url,token).pipe(switchMap(opt=>{
    //we don't want return opt, else this.jsonData transformed.
    //to transform data use pipe(map)
      return this.service.getJsonData(pipe(map(jsonData=>{
         let element=jsonData.find(e=>e.elementType=='dropdown');
         if (element)
           element.option=res.data
      return this.jsonData
    }))
  }).subscribe(res=>console.log(res));

https://stackoverflow.com/questions/53312544/next-and-previous-option-in-angular-form — Maniraj Murugan, Nov 15 '18 at 04:44
Hi Eliseo, i think you were busy with your work.. KIndly help me in this when you find time its purely based on this solution which you gave but unable to load the result from service thats the issue.. https://stackoverflow.com/questions/53338806/how-to-handle-data-comes-late-from-service — Maniraj Murugan, Nov 16 '18 at 15:14

How to assign data from service to JSON?

1 Answers1

Linked