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

问题描述

我正在制作 angular 6 应用程序，我正在制作一个 angular 动态形式，其中数据作为动态来自 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.

有效的stackblitz: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..

推荐答案

你必须问自己你收到什么数据以及你需要什么数据.一般来说，你可以有，例如<​​/p>

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

好吧，你的case比较容易，因为只有一个选项"和一个唯一的选项"，anf 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来自一个observable，不使用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屋！