render dynamic select option in html using javascript from json array

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

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>

Answer 2

You might use loop like:

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

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