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

Question

I have an object like this

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

I am trying render in html. so far I am able to get label and select list, but not able to get option in select list,

This is what I tried so far.

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

function createOptions(option) {
    var select = document.getElementById("property");
    return option.map(item => {
        return select.options[select.options.length] = new Option(item, item)
    })
}

And This is the output I get

What I dont know is how do i use createOptions function in this code.

Answer 1

You might use loop like:

for (key in data.values) {
        output += '<option>' + data.values[key] + '</option>';
    }

Example: https://jsfiddle.net/commanddotcom/j7f4y0kw/2/

Answer 2

Your id attributes will cause error since you are assigning the same ID for every dropdown. You could use name property for ID in this case.

 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 => { 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) { const options = data.values.map(opt => createOptions(opt)).join('') return `<div style="margin-left: 18px"> <label for="${data.name}">${data.name}: </label> <select id="${data.name}"> ${options} </select> </div>` }; function createOptions(option) { return `<option value="${option}">${option}</option>` }

 <div id="test1"></div>