What is the best way to transfer information from a service to JSON format?

Question

What is the best way to transfer information from a service to JSON format?

Currently, I am developing an Angular 6 application that involves creating a dynamic form using data obtained from a JSON file.

JSON Data:

  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
    }
  ];

In the dropdown section above, I aim to retrieve the options array from a service call by making it dynamic instead of hardcoding as it is currently shown.

The service function in dynamic-form.component.ts:

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

The response from res.data consists of:

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

This array will serve as the options for the dropdown in the JSON data structure.

Though the JSON is currently included in the .ts file, it will eventually be moved to a separate .json file.

For a demonstration, check out the working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-ng8m4z

I would appreciate guidance on integrating the data fetched from the service (res.data) into the dropdown options within the JSON.

javascript json angular typescript angular-reactive-forms

Answer 1

Answer №1

It is important to consider the data you are receiving and the data you actually need. For example, you can:

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",..}
     ])
}

Using switchMap to receive the full model ensures that you do not double subscribe to the same call.

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
           }))
        })
     )
}

If dealing with a simple case with fixed JSON data for a dropdown element, you can simply modify the data directly.

getFullJson(url,token) 
{
    this.service.get(url,token).pipe(map(opt=>{
      //we don't want return opt, instead transform the jsonData.
      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 data comes from an observable source, use switchMap instead of map to wait for the outer call to complete before processing the inner one.

getFullJson(url,token) {
    this.service.get(url,token).pipe(switchMap(opt=>{
    //we don't want return opt, instead transform the jsonData
    //use pipe(map) to transform data
      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));

Answer 2

It is important to consider the data you are receiving and the data you actually need. For example, you can:

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",..}
     ])
}

Using switchMap to receive the full model ensures that you do not double subscribe to the same call.

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
           }))
        })
     )
}

If dealing with a simple case with fixed JSON data for a dropdown element, you can simply modify the data directly.

getFullJson(url,token) 
{
    this.service.get(url,token).pipe(map(opt=>{
      //we don't want return opt, instead transform the jsonData.
      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 data comes from an observable source, use switchMap instead of map to wait for the outer call to complete before processing the inner one.

getFullJson(url,token) {
    this.service.get(url,token).pipe(switchMap(opt=>{
    //we don't want return opt, instead transform the jsonData
    //use pipe(map) to transform data
      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));

What is the best way to transfer information from a service to JSON format?

Answer №1

Similar questions

Retrieving the content of input elements within a div post removal

Searching within an array in MongoDB can be easily accomplished using the

Tips for displaying content from JavaScript onto a div element in HTML

Queueing up file downloads through a web browser

Is it possible to authenticate both users and admins within the same collection in Mongoose when using Node.js with Express? Can aggregation be used for this purpose?

Utilize node.js to run a local .php file within a polling loop

Having trouble developing a custom jQuery tool for textareas

React-highcharts: I'm encountering a difficulty with the "renderer" and I am seeking a solution to update the "state" when a function is called

Encountering complications when importing TypeScript declarations

Accessing MongoDB Collection with AngularIncorporating Angular to

How can I retrieve Json array data in android studio using volley?

"Attempting to access a variable defined in one pipe results in it being undefined in a

Converting JSON information into a table format for easy viewing

Unable to switch checkbox state is not working in Material UI React

Tips for improving performance on AJAX-based websites with unreliable networks

Removing a specific row in a database table and sending a boolean indicator to an API, all while keeping the original object intact

Incorporating Keyboard Features into Buttons

Learning how to implement react-toastify promises with axios is a valuable skill to have

How can I add an SVG tooltip that appears when I hover my

Switching back and forth between two buttons using JavaScript