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();
});

键：name，abbreviation-应该显示在下拉菜单中。

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>

Answer 2

您可以使用Object.keys(inputObject)方法来获取inputObject键的数组。因此，在您的情况下：

// 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>`

查看更多：

我想在html下拉列表中显示JSON数据键（不是值）

2 个答案: