CODEWITHSUNDEEP
javascripthtmljson
Aravind K
Aravind K

Reputation: 61

I want to display JSON data keys in html dropdown (not values)

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.

Upvotes: 0

Views: 178

Answers (2)

qiAlex
qiAlex

Reputation: 4346

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>

Upvotes: 2

ptdien
ptdien

Reputation: 84

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:

Upvotes: 2

Related Questions