Can anyone teach me how can I update json value using the the dropdown list. In JavaScript
HTML:
<select id="currency" onchange="getSelectValue();">
<option value="Singapore Dollar">Singapore Dollar</option>
<option value="USD">USD</option>
<option value="Malaysia Riggit">Malaysia Riggit</option>
</select>
JSON :
{
"products": [
{
"name": "Apple",
"price": "2.50",
"code": "SGD"
},
{
"name": "Orange",
"price": "2.50",
"code": "SGD"
}
]
}
You can create a select in javascript like this, focus on the <script />
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript - Select</title>
</head>
<body>
<div id="main"></div>
</body>
<script>
const {products} = JSON.parse('{ "products": [ { "name": "Apple", "price": "2.50", "code": "SGD" }, { "name": "Orange", "price": "2.50", "code": "SGD" } ] }');
const select = document.createElement("select");
select.id = 'currency';
select.onchange = ({target: {value}}) => console.log(value);
products.forEach(({code, name}) => {
const option = document.createElement("option");
option.label = name;
option.value = code;
select.appendChild(option);
});
const main = document.getElementById('main');
main.appendChild(select);
</script>
</html>
EDIT:
Add the "value" as a param of the function
<select id="currency" onchange="getSelectValue(value)">
<option value="SGD">Singapore Dollar</option>
<option value="USD">USD</option>
<option value="MR">Malaysia Riggit</option>
</select>
and the function definition should look like this:
const getSelectValue = (selectedValue) => {
console.log(selectedValue);
// Your code...
};
Here is the code sample.
var json=JSON.parse( "Your json which you mentioned above");
var products= json.products;
string selectlist="";
if(products.length>0)
{
selectlist += "<select>";
for(var i = 0; i < products.length; i++) {
var currency = json[i];
selectlist += "<option value="+currency.code+"> "+currency.code+" </option>";
}
selectlist += "</select>"
if("body").append(selectlist);
}