绑定JSON数组以进行选择

我试图将一个JSON数组绑定到元素，这是Ajax调用的结果。

JSON结构的示例如下所示：

 [{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}] 

我需要实现的是提取每个元素的JD_No值和JD_Name值并将它们绑定到html

我还必须声明JSON密钥是动态的，因此无法引用特定的密钥名称。

有什么帮助吗？

Answer 1

如果我理解正确，您想要将动态属性绑定到选择？ 如果您可以假定将始终按特定顺序返回具有特定数量属性的对象列表，则可以根据其INDEX访问属性。

以下示例从对象获取键和值：

 for (var i in myArray) { var obj = myArray[i]; var index = 0; var key, val; for (var prop in obj) { switch (index++) { case 0: key = obj[prop]; break; case 1: val = obj[prop]; break; default: break; } } $("select").append("" + val + ""); } 

Answer 2

在jQuery中你可以这样做：

你可以检查值是否是类型号，如果不是，那么它是一个名称。

JSFiddle在这里

 var jsonString = '[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]'; var json_data = JSON.parse(jsonString); for(var i = 0; i < json_data.length; i++){ var option = $(""); for( var key in json_data[i] ){ // There should only be two keys, if its a number its ID, else option name if( typeof json_data[i][key] === "number" ){ option.attr("value", json_data[i][key]); }else{ option.html(json_data[i][key]); } } $("select").append(option); } 

Answer 3

试试这个http://jsfiddle.net/SPMJz/

HTML

使用Javascript

 window.onload = function(){ var data = [ {"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"} ]; populateSelect(data, 'number', 'string'); } function populateSelect(data, idType, nameType){ if(!data || !data[0]){ return; } var select = document.getElementById('select'); var keys = Object.keys(data[0]); var idKey = typeof(parseInt(keys[0])) == idType ? keys[0] : keys[1]; var nameKey = typeof(parseInt(keys[0])) == nameType ? keys[0] : keys[1]; for(var i = 0; i < data.length; i++){ var option = document.createElement('option'); option.value = data[i][idKey]; option.label = data[i][nameKey]; select.appendChild(option); } } 

Answer 4

基于您的选项的value属性将始终为数字的假设。

 var json = [{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]; var options = [], key, value; json.forEach(function(obj) { Object.keys(obj).forEach(function(k) { if(typeof obj[k] === "number") { key = obj[k]; } else { value = obj[k]; } }); options.push({'key': key, 'value': value}); //or append it directly to select }); options.forEach(function(option) { var option = $('').attr('value', this.key).html(this.value); $('#slt').append(option); }); 

jsFiddle演示

一个jQuery解决方案：

 $.each(json, function() { $.each(this, function(k, v) { if(typeof v === 'number') { key = v; } else { value = v; } }); options.push({'key': key, 'value': value}); ////or append it directly to select }); $.each(options, function() { var option = $('').attr('value', this.key).html(this.value); $('#slt').append(option); }); 

Answer 5

考虑到json是您所讨论的对象数组的对象。 迭代数组，收集每个obj ，根据需要访问keys 。 生成元素并存储keys in the array.的keys in the array.相等的data-属性keys in the array.

 $.each(json, function(i, obj){ $('body').append(''); }); 

Answer 6

让jsonArray成为你的json数据，然后你可以使用下面的代码将数据绑定到select元素

 $.each(jsonArray, function (index, item) { $('#ddl').append($('').val(item.JD_No).html(item.JD_Name)); });