如何遍历 JSON 对象并附加 HTML 输入菜单/列表选择答案

【问题标题】：How to Iterating through an JSON Object and append an HTML input menu/list select如何遍历 JSON 对象并附加 HTML 输入菜单/列表选择
【发布时间】：2013-08-20 23:53:45
【问题描述】：

我在这里搜索并尝试了几种没有运气的解决方案。我有一个 html 输入菜单/列表选择，我想在用户输入输入文本框后填充选项。一旦用户输入参数，我希望 javascript 调用一个 php 页面并返回一个带有菜单选项的数组/对象。

我的 html 示例：

<select name="celestrials" id="celestrials" onFocus="updateCelestrials()">
<option value="Choose...">n/a</option>
</select>

我在 html 文件中的 javascript（与下面 var myURL 中使用的 json.php 文件位于同一文件夹中）：

function updateCelestrials () {
    var orbs = document.getElementById('systemNames').value;

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName="+orbs;

    $.getJSON(myURL, function(data) {
      $.each(data, function() { 
        $("<option value='" + data + "'>" + data + "</option>").appendTo("#celestrials");
      });
    });
}

php返回的我的数组：

echo json_encode($arrayItems, JSON_FORCE_OBJECT);

最后将我重新调整的数组/对象修剪下来以进行总结：

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III"}

完整数组：

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III","3":"YHN-3K IV","4":"YHN-3K IV - Moon 1","5":"YHN-3K V","6":"YHN-3K VI","7":"YHN-3K VI - Moon 1","8":"YHN-3K VII","9":"YHN-3K VIII","10":"YHN-3K VIII - Moon 1","11":"YHN-3K VIII - Moon 2","12":"YHN-3K VIII - Moon 3","13":"YHN-3K VIII - Moon 4","14":"YHN-3K VIII - Moon 5","15":"YHN-3K VIII - Moon 6","16":"YHN-3K VIII - Moon 7","17":"YHN-3K VIII - Moon 8","18":"YHN-3K VIII - Moon 9","19":"YHN-3K VIII - Moon 10","20":"YHN-3K VIII - Moon 11","21":"YHN-3K VIII - Moon 12","22":"YHN-3K IX","23":"YHN-3K IX - Moon 1","24":"YHN-3K IX - Moon 2","25":"YHN-3K IX - Moon 3","26":"YHN-3K IX - Moon 4","27":"YHN-3K IX - Moon 5","28":"YHN-3K IX - Moon 6","29":"YHN-3K IX - Moon 7","30":"YHN-3K IX - Moon 8","31":"YHN-3K IX - Moon 9","32":"YHN-3K IX - Moon 10","33":"YHN-3K IX - Moon 11","34":"YHN-3K IX - Moon 12","35":"YHN-3K IX - Moon 13","36":"YHN-3K IX - Moon 14","37":"YHN-3K IX - Moon 15","38":"YHN-3K IX - Moon 16","39":"YHN-3K IX - Moon 17","40":"YHN-3K IX - Moon 18","41":"YHN-3K IX - Moon 19","42":"YHN-3K IX - Moon 20","43":"YHN-3K IX - Moon 21","44":"YHN-3K X","45":"YHN-3K X - Moon 1","46":"YHN-3K X - Moon 2","47":"YHN-3K X - Moon 3","48":"YHN-3K X - Moon 4","49":"YHN-3K X - Moon 5","50":"YHN-3K X - Moon 6","51":"YHN-3K X - Moon 7","52":"YHN-3K X - Moon 8","53":"YHN-3K X - Moon 9","54":"YHN-3K X - Moon 10","55":"YHN-3K X - Moon 11","56":"YHN-3K X - Moon 12","57":"YHN-3K X - Moon 13","58":"YHN-3K X - Moon 14","59":"YHN-3K X - Moon 15","60":"YHN-3K X - Moon 16","61":"YHN-3K X - Moon 17","62":"YHN-3K X - Moon 18","63":"YHN-3K X - Moon 19","64":"YHN-3K XI","65":"YHN-3K XI - Moon 1","66":"YHN-3K XI - Moon 2","67":"YHN-3K XI - Moon 3","68":"YHN-3K XI - Moon 4","69":"YHN-3K XI - Moon 5","70":"YHN-3K XI - Moon 6","71":"YHN-3K XI - Moon 7","72":"YHN-3K XI - Moon 8","73":"YHN-3K XII","74":"YHN-3K XII - Moon 1","75":"YHN-3K XII - Moon 2","76":"YHN-3K XII - Moon 3","77":"YHN-3K XII - Moon 4","78":"YHN-3K XII - Moon 5","79":"YHN-3K XII - Moon 6","80":"YHN-3K XII - Moon 7","81":"YHN-3K XII - Moon 8","82":"YHN-3K XII - Moon 9","83":"YHN-3K XII - Moon 10","84":"YHN-3K XII - Moon 11","85":"YHN-3K XII - Moon 12","86":"YHN-3K XII - Moon 13","87":"YHN-3K XII - Moon 14","88":"YHN-3K XII - Moon 15","89":"YHN-3K XII - Moon 16","90":"YHN-3K XII - Moon 17","91":"YHN-3K XII - Moon 18","92":"YHN-3K XII - Moon 19","93":"YHN-3K XII - Moon 20","94":"YHN-3K XIII","95":"YHN-3K XIII - Moon 1","96":"YHN-3K XIII - Moon 2","97":"YHN-3K XIII - Moon 3"}

【问题讨论】：

我什至尝试过删除 JSON_FORCE_OBJECT ，但没有成功。我错过了一些我能感觉到的简单的东西。
您的控制台中是否出现任何错误？我还建议您使用相对路径而不是绝对路径来获取您的 url，因为您在同一个文件夹中。在以下行中将data 替换为this：$("<option value='" + data + "'>" + data + "</option>").appendTo("#celestrials");
@JeffNoel 没有错误，使用this 可以处理除我的示例查询之外的所有其他测试YHN-3K
我开始认为这可能是缓存问题，因为其他测试有效，所以我关闭了浏览器并重新打开，它开始使用我的测试查询。谢谢@JeffNoel！！
不客气。为方便起见，我还使用您的完整数组更新了我的现场演示。

标签： php javascript html json getjson

【解决方案1】：

说明

在创建 <option> DOMElement 时插入 this 而不是 data。

错误在于您的$.each() 循环，您倾向于在每次循环时尝试将整个data 对象的值放入您的DOMElement。

尽量只放置一个值而不是整个对象。

JQuery - Live Demo

 $.each(data, function() { 
     $("<option value='" + this + "'>" + this + "</option>").appendTo("#celestrials");
 });

纯 JavaScript 循环 - Live Demo

注意：我没有使用.length 属性，因为接收到的对象可能不一定有。这取决于它是否采用有效格式。照原样，它似乎不是 JSON 对象。

for(var i=0; i<Object.keys(data).length; i++) {
    document.querySelector('#celestrials').innerHTML += "<option value='" + data[i] + "'>" + data[i] + "</option>"
}

【讨论】：

【解决方案2】：

看到这个小提琴：http://jsfiddle.net/gCFM9/

我建议这个选项：

for(var i in data) {
   data[i] //each value of i position
}

【讨论】：

我同意，并且只是基于 Jeff 的评论，您要确保您的 php 返回一个数组，而不是一个对象。
只是把我的评论放回去（编辑）：使用for ... in 循环在脚本上有一个huge performance effect。尝试改用常规的for 循环。
@xmarston 非常欢迎你，就我而言，我实际上是在上周了解到的！

【解决方案3】：

function updateCelestrials () {
    // If you are using jQuery - use jQuery.
    var orbs = $('#systemNames').val();

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName=" 
                    // make sure you escape user's input
                    + encodeURIComponent(orbs); 

    $.getJSON(myURL, function(data) {
      // make less DOM actions by storing in local variable 
      // and appending later on
      var items = '';
      $.each(data, function(index, value) { 
        items += "<option value='" + index + "'>" + value + "</option>";
      });
      $("#celestrials").html(items); // beware. this will replace all options :)

      // also avoid using jQuery for no reason when creating 
      // elements with $([html here]).appendTo
    });
}

但我宁愿将 $.each 替换为

for (var index in data) {
   if (data.hasOwnProperty(index)) { // make sure you are using your properties
       items += "<option value='" + index + "'>" + data[index] + "</option>";
   }
}

【讨论】：