如何使用json数据填充HTML列表框 [英] How do I populate a HTML listbox using json data
问题描述
我有一个Web服务，它是为了传递Json数据而构建的。我可以验证数据是否正在传递并且是Json格式。我有一个JavaScript AJAX调用，它将连接到Web服务并检索数据。我可以看到这是有效的，因为我有一个警告，向我显示Json数据。我的困境是，我已经看到了许多不同的方法来填充列表框，但尝试了其中一些我无法让他们使用我的数据。我很难过。
我尝试了什么：
我的Json数据：
{批次：[{ID：1，产品：123117C}，{ID：2，产品： 123116B}，{ID：3，product：123116A}，{ID：4，product：123017B}，{ID：5，product：123016D }，{ID：6，product：122917A}，{ID：7，product：122916C}，{ID：8，product：122817D}， {ID：9，product：122817C}，{ID：10，product：122816B}]，Table1：[{id：0，item： item 0}，{id：1，item：item 1}]}
HTML代码所在列表框所在：
< div class =col-lg-12>
< select path =lstObjectsid =lstObjectsname =BatchID>
< / select>
< / div>
我的Javascript将在文档加载时填充列表框：
函数GetBatchData（）{
$ .ajax（{
type：'GET'，
url ：'http：//192.168.1.103/Web%20Service/Service.asmx/GetBatchData'，
dataType：'json'，
contentType：'application / json; charset = utf-8'，
成功：函数（产品）{
var products = JSON.parse（product.d）;
// var names = product.d;
// alert（product）;
$ .each（产品，函数（索引，值）{
$（'＃lstObjects'）。append（$（'< option>'）。text（value）.val（index） ）;
}）;
}，
失败：函数（错误）{
alert（error.d）;
}
}）;
};
现在这个Javascript没有尝试填充列表框。我最接近的是从Json调用中获取所有记录并将它们粘贴到列表框中的一行中。我这个项目的最终目标是允许用户选择一个列表框项目，该项目将与Javascript中的变量相关联，以更新我的绘图函数。
.ajax（{
type：'GET'，
url：'http：//192.168.1.103/Web%20Service/Service.asmx/GetBatchData'，
dataType：' json'，
contentType：'application / json; charset = utf-8'，
success：function（product）{
var products = JSON.parse（product.d）;
// var names = product.d;
// alert（product）;
.each（products，function（index，value）{
（ '＃lstObjects'）。追加（
I have a web service which has been built to pass Json data. I can verify that the data is being passed and is in the Json format. I have a JavaScript AJAX call which is to connect to the web service and retrieve the data. I can see that this works because I have an alert which shows me the Json data. My dilemma is that I have seen a number of different ways to populate a listbox but having tried a few of them I have not been able to get them to work with my data. I am stumped.
What I have tried:
My Json data:
{ "Batches": [ { "ID": 1, "product": "123117C" }, { "ID": 2, "product": "123116B" }, { "ID": 3, "product": "123116A" }, { "ID": 4, "product": "123017B" }, { "ID": 5, "product": "123016D" }, { "ID": 6, "product": "122917A" }, { "ID": 7, "product": "122916C" }, { "ID": 8, "product": "122817D" }, { "ID": 9, "product": "122817C" }, { "ID": 10, "product": "122816B" } ], "Table1": [ { "id": 0, "item": "item 0" }, { "id": 1, "item": "item 1" } ]}
The HTML code where the listbox resides:
<div class="col-lg-12"> <select path="lstObjects" id="lstObjects" name="BatchID"> </select> </div>
My Javascript which is to be populating the listbox upon document load:
function GetBatchData() {
$.ajax({
type: 'GET',
url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetBatchData',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
success: function(product) {
var products = JSON.parse(product.d);
// var names = product.d;
// alert(product);
$.each(products, function(index, value) {
$('#lstObjects').append($('<option>').text(value).val(index));
});
},
failure: function(error) {
alert(error.d);
}
});
};
Right now this Javascript does not have an attempt to populate the listbox. The closest I got to doing that took all the records from the Json call and paste them into one line in the listbox. My ultimate goal with this project is to allow the user to select a listbox item and that item would be associated with a variable in the Javascript to update a plot function I have.
.ajax({ type: 'GET', url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetBatchData', dataType: 'json', contentType: 'application/json;charset=utf-8', success: function(product) { var products = JSON.parse(product.d); // var names = product.d; // alert(product);
.each(products, function(index, value) {
('#lstObjects').append(
这篇关于如何使用json数据填充HTML列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
