使用 json 数组中的 javascript 在 html 中呈现动态选择选项

Question

我有一个这样的对象

var Blocks = {

    "name": "Column",

    "properties": [

        {

        "name": "mainAxisAlignment",

        "type":"dropDown",

        "values":[

            "center",

            "end",

            "spaceAround",

            "spaceBetween",

            "spaceEvenly",

            "start"

            ]

        },

        {

        "name": "crossAxisAlignment",    

        "type":"dropDown",

        "values":[

            "baseline",

            "center",

            "end",

            "start",

            "stretch"

            ]

        },

        {

            "name":"direction",

            "type": "string"

        },

        {

            "name":"hashCode",

            "type": "string"

        },

        {

            "name":"key",

            "type": "string"

        },

        {

        "name": "mainAxisSize",        

        "type":"dropDown",

        "values":[

            "max",

            "min"

            ]

        },

        {

            "name":"textBaseline",

            "type": "string"

        },

    ],

}

我正在尝试以 html 形式呈现。到目前为止，我能够获取标签和选择列表，但无法获取选择列表中的选项，

这是我到目前为止所尝试的。

document.getElementById('test1').innerHTML = `<div>

<div>${Blocks.name}</div>

<div id='selection'></div>

</div>`

document.getElementById('selection').innerHTML = Blocks.properties.map(user => {

    switch (user.type) {

        case 'dropDown':

            return propertyDropdown(user)

        case 'string':

            return propertyString(user)

        default:

            break;

    }

}).join('')

function propertyString(data) {

    return `<div style="margin-left: 18px">

                <label>${data.name}: </label>

            </div>`

};

function propertyDropdown(data) {

    return `<div style="margin-left: 18px">

                <label for="property">${data.name}: </label>

                <select id="property">

                </select>

            </div>`

};

这是我得到的输出

https://i.stack.imgur.com/EwU6R.png

我不知道如何createOptions在这段代码中使用函数。

Answer 1

您的id属性将导致错误，因为您为每个下拉列表分配相同的ID。在这种情况下，您可以使用name属性作为 ID。var Blocks={name:"Column",properties:[{name:"mainAxisAlignment",type:"dropDown",values:["center","end","spaceAround","spaceBetween","spaceEvenly","start"]},{name:"crossAxisAlignment",type:"dropDown",values:["baseline","center","end","start","stretch"]},{name:"direction",type:"string"},{name:"hashCode",type:"string"},{name:"key",type:"string"},{name:"mainAxisSize",type:"dropDown",values:["max","min"]},{name:"textBaseline",type:"string"}]};document.getElementById('test1').innerHTML = `<div><div>${Blocks.name}</div><div id='selection'></div></div>`document.getElementById('selection').innerHTML = Blocks.properties.map(user => {&nbsp; &nbsp; switch (user.type) {&nbsp; &nbsp; &nbsp; &nbsp; case 'dropDown':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return propertyDropdown(user)&nbsp; &nbsp; &nbsp; &nbsp; case 'string':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return propertyString(user)&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }}).join('')function propertyString(data) {&nbsp; &nbsp; return `<div style="margin-left: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>${data.name}: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`};function propertyDropdown(data) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const options = data.values.map(opt => createOptions(opt)).join('')&nbsp; &nbsp; return `<div style="margin-left: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="${data.name}">${data.name}: </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="${data.name}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${options}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`};function createOptions(option) {&nbsp; &nbsp; return `<option value="${option}">${option}</option>`}<div id="test1"></div>

Answer 2

您可以使用如下循环：for&nbsp;(key&nbsp;in&nbsp;data.values)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output&nbsp;+=&nbsp;'<option>'&nbsp;+&nbsp;data.values[key]&nbsp;+&nbsp;'</option>'; &nbsp;&nbsp;&nbsp;&nbsp;}示例： https:&nbsp;//jsfiddle.net/commanddotcom/j7f4y0kw/2/