您好,我想将下拉列表绑定到来自对象数组的值?我做了以下工作,但不确定如何:

JS代码:

const objArray = [
    {
        "type": "select",
        "required": false,
        "label": "WorkTime",
        "name": "select-1659012135405-0",
        "customFieldId": "4330",
        "fieldCode": "WT1",
        "advancedSettings": "Edit",
        "typeDescription": "Select",
        "values": [
            {
                "label": "Apples",
                "value": "AP",
                "selected": false
            },
            {
                "label": "Bananas",
                "value": "BA",
                "selected": false
            },
            {
                "label": "Pineapples",
                "value": "PI",
                "selected": false
            }
        ]
    },
    {
        "type": "select",
        "required": false,
        "label": "WorkHours",
        "name": "select-1659012135415-0",
        "customFieldId": "13916",
        "fieldCode": "WH",
        "advancedSettings": "Edit",
        "typeDescription": "Select",
        "values": [
            {
                "label": "Day",
                "value": "D",
                "selected": false
            },
            {
                "label": "Night",
                "value": "N",
                "selected": false
            }
        ]
    }
];

const result = objArray.map(({customFieldId, fieldCode, label, values}) => {
  if (!values) { return; }
  
  return values.reduce((obj, key, index) => {
     return Object.assign(obj, {
      [`${customFieldId}-${index}`]: 
      { 
        value: `${customFieldId}-${fieldCode}-${key.value}`,
        text: `${fieldCode} - ${label} - ${key.label}`
      }
     });  
  }, {});
});

console.log(result);

当前结果:

[{
  4330-0: {
    text: "WT1 - WorkTime - Apples",
    value: "4330-WT1-AP"
  },
  4330-1: {
    text: "WT1 - WorkTime - Bananas",
    value: "4330-WT1-BA"
  },
  4330-2: {
    text: "WT1 - WorkTime - Pineapples",
    value: "4330-WT1-PI"
  }
}, {
  13916-0: {
    text: "WH - WorkHours - Day",
    value: "13916-WH-D"
  },
  13916-1: {
    text: "WH - WorkHours - Night",
    value: "13916-WH-N"
  }
}]

预期结果:

[
  {
    text: "WT1 - WorkTime - Apples",
    value: "4330-WT1-AP"
  },
  {
    text: "WT1 - WorkTime - Bananas",
    value: "4330-WT1-BA"
  },
  {
    text: "WT1 - WorkTime - Pineapples",
    value: "4330-WT1-PI"
  },
  {
    text: "WH - WorkHours - Day",
    value: "13916-WH-D"
  },
  {
    text: "WH - WorkHours - Night",
    value: "13916-WH-N"
  }
]

要绑定到下拉查找,键将为value,DisplayText将为text.我怎样才能做到这一点?

推荐答案

可以取flatMap作为外部数组,并将新对象映射到内部array.

const
    data = [{ type: "select", required: false, label: "WorkTime", name: "select-1659012135405-0", customFieldId: "4330", fieldCode: "WT1", advancedSettings: "Edit", typeDescription: "Select", values: [{ label: "Apples", value: "AP", selected: false }, { label: "Bananas", value: "BA", selected: false }, { label: "Pineapples", value: "PI", selected: false }] }, { type: "select", required: false, label: "WorkHours", name: "select-1659012135415-0", customFieldId: "13916", fieldCode: "WH", advancedSettings: "Edit", typeDescription: "Select", values: [{ label: "Day", value: "D", selected: false }, { label: "Night", value: "N", selected: false }] }],
    result = data.flatMap(({ fieldCode, label, customFieldId, values }) =>
        values.map(o => ({
            text: [fieldCode, label, o.label].join(' - '),
            value: [customFieldId, fieldCode, o.value].join('-')
        }))
    );

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Javascript相关问答推荐

React存档iframe点击行为

为什么我的includes声明需要整个字符串?

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

如何在mongoose中链接两个模型?

如何粗体匹配的字母时输入搜索框使用javascript?

为什么按钮会随浮动属性一起移动?

在带有背景图像和圆形的div中添加长方体阴影时的重影线

无法从NextJS组件传递函数作为参数'

在Java中寻找三次Bezier曲线上的点及其Angular

使用Nuxt Apollo在Piniastore 中获取产品细节

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

触发异步函数后不能显示数据

使用父标签中的Find函数查找元素

在Java脚本中录制视频后看不到曲目

构建器模式与参数对象输入

我为什么要使用回调而不是等待?

将字体样式应用于material -UI条形图图例

我如何才能让p5.js在不使用实例模式的情况下工作?

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:Object.在Reaction项目中

此上下文在JavaScript中