通过AJAX拉动JSON填充下拉 [英] Pulling in JSON via AJAX to populate a Drop-Down
问题描述
我拉一些JSON数据会有所不同......例如：
返回的数据可能是：
[{用户ID：2779，UserFullName：绝对亲Formance}，{用户ID：2780，UserFullName：AR制造}，{用户ID：2781，UserFullName：邦达卢卡斯设计集团}]
或
[{订单ID：112958，OrderName：订单ID：112958}，{订单ID：112957，OrderName：订单ID ：112957}，{ORDERID：112956，OrderName：订单ID：112956}]
我所试图做的是处理此JSON打造＆LT;选择＆GT; 列表
//加载在一个下拉的JSON
功能LoadDropDown（$网址，$其中，$ ID，$ selectName）{
变量$负荷='＆LT; DIV CLASS =pageLoader的风格=保证金：0汽车重要;填充：！0重要;＆GT;＆LT; IMG SRC =/资产/图像/ AJAX-loader.gifALT =载入中...高度=11WIDTH =16/＆GT;＆LT; / DIV＆GT;';
变量$ T = Math.round（新日期（）的getTime（）/ 1000）;
变量$容器=的jQuery（$位置）;
VAR的选择= {
网址：'？_ ='$ URL + + $ T，
缓存：假的，
键入：POST，
beforeSend：函数（）{
$ container.html（$装）;
}，
成功：功能（数据，状态，jqXhr）{
$的HTML ='＆LT;选择类=表单控制ID =+ $ selectName +'NAME =+ $ selectName +'＆GT;';
$ HTML + ='＆LT;期权价值=0＆GT; - 选择一个选项 - ＆LT; /选项＆GT;';
对于（VAR I = 0; I＆LT; data.length-1 ++ I）{
VAR项目=数据[I]
执行console.log（item.userID）;
}
$ HTML + ='＆LT; /选择＆GT;';
$ container.html（'＆LT; pre＆GT;'+数据+'＆LT; / pre＆GT;'）;
}，
完成：功能（jqXhr，状态）{}，
错误：函数（jqXhr，状态，错误）{
$ container.slideDown（快）HTML（'＆LT; DIV CLASS =警报警报的危险警报，dismissable＆GT;＆LT;按钮式=按钮级=关闭数据解雇=提醒咏叹调-hidden =真正的＆GT;＆安培;倍;＆LT; /按钮＆GT;＆LT;我类=发发，感叹号三角FA-4X拉左＆GT;＆LT; / I＆GT;＆LT; P＆GT;＆LT;强＆GT ;危险就会罗宾逊＆LT;！/ STRONG＆GT;＆LT; BR /＆GT;有一个问题，拉在本页面我们的支持团队已经收到通知，请稍后再试＆LT; / P＆GT;＆LT; / DIV＆GT;'）;
}
};
jQuery.ajax（选件）;
}
我遇到的问题是...＃1 的console.log（item.userID）; 总是显示未定义和＃2哪能effecitvely动态生成选项？返回的JSON将始终包含2个项目行和 ID 和名称
更新
的（数据变量$键）{
变量$ VAL =数据[$关键]
为（在$ VAL $ j）条{
的console.log（姓名：+ $ J +=+ $ VAL [$ J]）;
}
}
是显示我什么，我需要在Firefox控制台...但是，每行1个项目，每个（例如第一JSON）名称：用户ID = 1234 下一行名称：UserFullName = TheName
我怎样才能让他们这样我就可以建立我的＆LT;选项＆gt;
使用：
的（数据变种K）{
的console.log（K，数据[K]）;
}
我回：
2955对象{订单ID =8508，OrderName =订单编号：8508}
和
2955对象{用户ID =1355，UserFulleName =我自己和我}
治愈：通过返回的JSON的每一项改变了我的循环周期，得到了他们的钥匙，等...
变量$ DL = data.length;
对于（VAR $ i = 0; $ I＆LT; $ DL - 1 ++ $ I）{
变量$键= Object.keys（数据[$ i]）;
$ HTML + ='＆LT;期权价值=+数据[$ i] [$键[0] +'＆GT; +数据[$ i] [$键[1] +'＆LT; /选项＆GT;';
}
I am pulling in some JSON data that will vary... for instance:
Data returned could be:
[{"userID":"2779","UserFullName":" Absolute Pro-Formance"},{"userID":"2780","UserFullName":" AR Fabrication"},{"userID":"2781","UserFullName":" Banda Lucas Design Group"}]
or:
[{"orderID":"112958","OrderName":"Order ID: 112958"},{"orderID":"112957","OrderName":"Order ID: 112957"},{"orderID":"112956","OrderName":"Order ID: 112956"}]
What I am attempting to do is process this JSON to build a <select> list.
// Load in a drop-down as JSON
function LoadDropDown($url, $where, $id, $selectName){
var $loading = '<div class="pageLoader" style="margin:0 auto !important;padding:0 !important;"><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>';
var $t = Math.round(new Date().getTime() / 1000);
var $container = jQuery($where);
var options = {
url: $url + '?_=' + $t,
cache: false,
type: 'POST',
beforeSend: function(){
$container.html($loading);
},
success: function(data, status, jqXhr){
$html = '<select class="form-control" id="'+$selectName+'" name="'+$selectName+'">';
$html += '<option value="0">- Select an Option -</option>';
for(var i = 0; i < data.length-1; ++i) {
var item = data[i];
console.log(item.userID);
}
$html += '</select>';
$container.html('<pre>' + data + '</pre>');
},
complete: function(jqXhr, status){},
error: function(jqXhr, status, error){
$container.slideDown('fast').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><i class="fa fa-exclamation-triangle fa-4x pull-left"></i><p><strong>Danger Will Robinson!</strong><br />There was an issue pulling in this page. Our support team has been notified, please check back later.</p></div>');
}
};
jQuery.ajax(options);
}
The issue I am having is... #1 console.log(item.userID); always shows undefined, and #2 how can I effecitvely dynamically build the options? The returned JSON will ALWAYS contain 2 items per row and id, and a name
UPDATE
for(var $key in data){
var $val = data[$key];
for($j in $val){
console.log('name:' + $j + ' = ' + $val[$j]);
}
}
Is showing me what I need in Firefox Console... But 1 item per line, for each (for example the 1st JSON) name:userID = 1234 next line name:UserFullName = TheName
How can I get them so I can build my <options>?
With:
for(var k in data) {
console.log(k, data[k]);
}
I am returned:
2955 Object { orderID="8508", OrderName="Order ID: 8508"}
and
2955 Object { userID="1355", UserFulleName="Me Myself And I"}
Cured: Changed my loop to cycle through each item in the returned JSON, got their keys, etc...
var $dl = data.length;
for(var $i = 0; $i < $dl - 1; ++$i) {
var $keys = Object.keys(data[$i]);
$html += '<option value="' + data[$i][$keys[0]] + '">' + data[$i][$keys[1]] + '</option>';
}
这篇关于通过AJAX拉动JSON填充下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
