代码之家 › 专栏 › 技术社区 › rrackow

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

getjson json html javascript php

rrackow · 技术社区 · 13 年前

我在这里搜索过,尝试过几种解决方案,但都没有成功。我有一个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"}

3 回复 | 直到 13 年前

Community Mohan Dere 6 年前

解释

插入 this 而不是 data 当您创建 <option> 圆顶元件。

错误在于 $.each() 循环,你倾向于尝试将整体的值 数据 每次循环时,对象都会出现在DOMElement中。

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

JQuery(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>"
}

SELECT

xmarston 13 年前

看看这把小提琴: http://jsfiddle.net/gCFM9/

我建议这样做:

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

Artem L qooplmao 13 年前

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

但我宁愿用

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