https://api.myjson.com/bins/7xq2x this is my JSON data I want to display the keys in dropdown. My JSON data will be dynamic so I want code for dynamic JSON data to take only the keys
function renderBusinessUnitChart(){
$.ajax({
url: "https://api.myjson.com/bins/7xq2x",
success:function(result){
}
});
}
$(document).ready(function(){
renderBusinessUnitChart();
});
Keys: name, abbreviation - this should display in dropdown.
For displaying keys:
function renderBusinessUnitChart(){
var ddown = document.querySelector('#dropdown') // I don't know what kind of dropdown do you have, so we will use regular select
$.ajax({
url: "https://api.myjson.com/bins/7xq2x",
success:function(result){
const itemKeys = Object.keys(result[0]) // getting keys from first item of result array
var options = itemKeys.map(key => { // looping the keys
const option = new Option(
key,
key
) // creating a one option item for dropdown
ddown.appendChild(option) // adding option to dropdown
return option // returning option and adding it to array
})
console.log (options) // aray of options you will need it for some reason
}
});
}
$(document).ready(function(){
renderBusinessUnitChart();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown"></select>For displaying keys where objects can contain different keys:
function renderBusinessUnitChart(){
// I don't know what kind of dropdown do you have, so we will use regular select
var ddown = document.querySelector('#dropdown')
$.ajax({
url: "https://api.myjson.com/bins/7xq2x",
success:function(result) {
result = [ // for testng purposes only, to check that result may contain objects with different keys
{"name":"Alberta","abbreviation":"AB"},
{"name2":"British Columbia","abbreviation2":"BC"}
]
const options = result // getting array of unique keys from every item in result
.reduce((ac, item) => [...ac, ...Object.keys(item).filter(key => !~ac.indexOf(key))], [])
.map(key => { // looping the keys
// creating a one option item for dropdown
const option = new Option(key, key)
// adding option to dropdown
ddown.appendChild(option)
// returning option and adding it to array
return option
})
// aray of options you will need it for some reason
console.log (options)
}
})
}
$(document).ready(function(){
renderBusinessUnitChart()
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown"></select>For displaying values:
function renderBusinessUnitChart(){
var ddown = document.querySelector('#dropdown') // I don't know what kind of dropdown do you have, so we will use regular select
$.ajax({
url: "https://api.myjson.com/bins/7xq2x",
success:function(result){
var options = result.map(_ => { // looping the result
const option = new Option(
_.name,
_.abbreviation
) // creating a one option item for dropdown
ddown.appendChild(option) // adding option to dropdown
return option // returning option and adding it to array
})
console.log (options) // aray of options you will need it for some reason
}
});
}
$(document).ready(function(){
renderBusinessUnitChart();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown"></select>
name, abbreviation)
You can use Object.keys(inputObject) method to get an array of inputObject keys.
So in your case:
// Need to make sure your result is an object instead of array;
var resultObj = Array.isArray(result) ? result[0] : result;
function populateOptions(resultObj){
return Object.keys(resultObj).map(key => {
return `<option value="${key}">${key}</option>`
}).join("");
}
var selectHtml = `<select>${populateOptions(resultObj)}</select>`
See more:
(``) syntax)