Select2 Optgroup结果集

时间:2018-10-26 18:53:43

标签: javascript jquery json jquery-select2

我希望就以下问题获得帮助。

我获取以下JSON数据:

{
    "0": {
    "Name": "Hello World OPTGROUP",
    "values": [
        {
            "Vector": "[REDACTED]",
            "Name": "Hello World",
            "Value": "[REDACTED]",
            "Matched": null
        }
    ]
},    
{
    "1": {
    "Name": "Lorem Ipsum OPTGROUP",
    "values": [
        {
            "Vector": "[REDACTED]",
            "Name": "Lorem Ipsum",
            "Value": "[REDACTED]",
            "Matched": null
        }
    ]
}

我该如何构建包含每个数组标签的 processResults 下拉结果集?

<select>
    <optgroup label="Hello World OPTGROUP">
    <option>Values[0] Value</option>
    <option>Values[1] Value</option>
    <optgroup label="Lorem Ipsum OPTGROUP">
    <option>Values[0] Value</option>
    <option>Values[1] Value</option>
</select>

1 个答案:

答案 0 :(得分:0)

您的JSON数据不是很完整,因此我在一些{}中放入了您认为需要的数据。

一种方法是:

const data = [{
    "0": {
    "Name": "Hello World OPTGROUP",
      "values": [
          {
              "Vector": "[REDACTED]",
              "Name": "Hello World",
              "Value": "[REDACTED]",
              "Matched": null
          }
      ]
    }
},    
{
    "1": {
      "Name": "Lorem Ipsum OPTGROUP",
      "values": [
          {
              "Vector": "[REDACTED]",
              "Name": "Lorem Ipsum",
              "Value": "[REDACTED]",
              "Matched": null
          },
          {
              "Vector": "[REDACTED]",
              "Name": "Lorem Ipsum",
              "Value": "[REDACTED]2",
              "Matched": null
          }
       ]
    }
}];
const optMap = e => `<option>${e.Value}</option>`
let templateInner = data
  .map(e=>e[Object.keys(e)])
  .map(e=>`
    <optgroup label="${e.Name}">
    ${e.values.map(optMap).join('')}`)
  .join('')
let template = `<select>${templateInner}
</select>`
console.log(template)