通过 AJAX 拉入 JSON 以填充下拉列表

Question

我正在提取一些会有所不同的 JSON 数据...例如：

返回的数据可能是：

[{"userID":"2779","UserFullName":" Absolute Pro-Formance"},{"userID":"2780","UserFullName":" AR Fabrication"},{"userID":"2781","UserFullName":" Banda Lucas Design Group"}]

或：

[{"orderID":"112958","OrderName":"Order ID: 112958"},{"orderID":"112957","OrderName":"Order ID: 112957"},{"orderID":"112956","OrderName":"Order ID: 112956"}]

我试图做的是处理这个 JSON 来构建一个<select> 列表。

// 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">&times;</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);
}

我遇到的问题是... #1 console.log(item.userID); 总是显示 undefined，而 #2 我怎样才能有效地动态构建选项？返回的 JSON 将始终包含每个 row 和 id 的 2 个项目，以及一个 name

更新

for(var $key in data){
    var $val = data[$key];
    for($j in $val){
        console.log('name:' + $j + ' = ' + $val[$j]);
    }
}

在 Firefox 控制台中向我展示了我需要什么...但是每行 1 项，每个（例如第一个 JSON）name:userID = 1234 下一行 name:UserFullName = TheName

我怎样才能得到它们以便我可以构建我的<options>？

与：

for(var k in data) {
    console.log(k, data[k]);
}                   

我回来了：

2955 Object { orderID="8508", OrderName="Order ID: 8508"}

和

2955 Object { userID="1355", UserFulleName="Me Myself And I"}

Answer 1

你不需要使用这么乱的代码。同样在您的 Ajax 设置中 dataType:"json"

success:function() {
    var listB=$('#yourdropdownId');
    listB.empty();  
    $.each(result, function (index, item) {
        listB.append(
            $('<option>', {
                value: item.userID,
                text: item.UserFullName
            }, '<option/>'))
         });
    }

如果您只想从服务器检索 json，也可以使用 $.getJson 而不是 ajax

$.getJSON('@Url.Action(" "," ")',
                { "youparametername": yourdata}, function (data) {
                    $.each(data, function (index, item) {
                    })
            });

Answer 2

在选项对象中，确保使用

dataType: 'json'

或者你可以在成功处理程序中使用

JSON.parse(data)

Answer 3

治愈：将我的循环更改为循环遍历返回的 JSON 中的每个项目，获取它们的密钥等...

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