如何将数据从服务分配到JSON? [英] How to assign data from service to JSON?

问题描述

我正在制作angular 6应用程序，在这里我正在制作一个角度动态表格，其中数据来自JSON动态.

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

在下拉菜单中，我想从服务调用中获取options数组.

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..

dynamic-form.component.ts中的服务:

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

res.data 返回以下内容，

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

此数据数组将成为JSON中的options.

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

到目前为止，我已经在.ts文件中提供了JSON，但稍后它将是一个单独的.json文件.

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

工作中的堆叠闪电战: https://stackblitz.com/编辑/angular-x4a5b6-ng8m4z

请帮助我将来自服务(res.data)的数据放置到JSON内的下拉options中.

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

推荐答案

您必须问自己有关收到的数据以及所需的数据的信息.一般来说，您可以拥有例如

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

您必须使用switchMap来接收fullModel. switchmap使您不会收到第一个电话，否则不会收到第一个电话.是一种不连接订阅的方法

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

嗯，您的情况比较容易，因为只有一个选项"和一个唯一的选项"，并且json是固定的.

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

如果您的json来自可观察的而不是使用map，请使用switchmap. SwitchMap，等待外部调用结束进行第二次

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

这篇关于如何将数据从服务分配到JSON?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！