javascript - 我想在 html 下拉列表中显示 JSON 数据键(而不是值)

Question

https://api.myjson.com/bins/7xq2x这是我的 JSON 数据，我想在下拉列表中显示键。我的 JSON 数据将是动态的，因此我希望动态 JSON 数据的代码仅采用键

function renderBusinessUnitChart(){
   $.ajax({
      url: "https://api.myjson.com/bins/7xq2x",
      success:function(result){

      }
  });

}
$(document).ready(function(){
    renderBusinessUnitChart();
});

键:名称、缩写 - 这应该显示在下拉列表中。

Answer 1

用于显示键:

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>

用于显示对象可以包含不同键的键:

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>

用于显示值:

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>