javascript 使用 JSON 用 jQuery 填充 UL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12847972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JSON To Populate UL With jQuery
提问by RSolberg
This is my JSON data
这是我的 JSON 数据
[
{"CountyId":2,"Name":"Snohomish","StateId":1,"State":null,"Plans":null},
{"CountyId":1,"Name":"Whatcom","StateId":1,"State":null,"Plans":null}
]
I'm attempting to populate a UL on my web page with this data.
我正在尝试使用此数据在我的网页上填充 UL。
function loadSavedCounties() {
$.post("/Plans/GetPlanCounties/",
{ planId: $("#PlanId").val() },
function (data) {
populateSavedCounties($("#SavedCounties"), data);
}
);
}
function populateSavedCounties(select, data) {
select.html('');
var items = [];
$.each(data, function (id, option) {
items.push('<li>' + option.Name + '</li>');
});
select.append(items.join(''));
}
I know that i'm successfully calling the loadSavedQueries()because my UL is being cleared out with the select.html('')call. But no items are being put back into the UL.
我知道我正在成功呼叫 ，loadSavedQueries()因为我的 UL 正在被select.html('')呼叫清除。但没有物品被放回 UL。
Update...
更新...
After the obvious fixes and changes not working, I discovered an issue within the controller that wasn't throwing an error, but was basically returning empty JSON objects. Once I caught this, the data started flowing down and the changes suggested did the trick.
在明显的修复和更改不起作用之后，我在控制器中发现了一个问题，该问题没有抛出错误，但基本上返回了空的 JSON 对象。一旦我发现了这一点，数据就开始向下流动，建议的更改就起到了作用。
回答by Gabriel Florit
You can set the UL's html at the end - no need to clear it out first:
您可以在最后设置 UL 的 html - 无需先将其清除：
function populateSavedCounties(select, data) {
var items = [];
$.each(data, function (id, option) {
items.push('<li>' + option.Name + '</li>');
});
select.html(items.join(''));
}
回答by SpYk3HH
This is very easy, I'll write up code first, then try to go back and explain.
这很容易，我先写代码，然后再回去解释。
Script
脚本
// You obviously know how to use .post
$.post("/Plans/GetPlanCounties/", { planId: $("#PlanId").val() }, function(data) {
// out of simplicity, i did not create a seperate function, however you seem to know how to move functions around
// below of course i simply assign a variable for reuse to the element you want
var $this = $("#SavedCounties").empty();
// instead of .each, I went on the premise that your data is returned exactly as stated above,
// in which case, a simple old school for statement is easiest
for (x in data) {
// this is real simple, the first part creates a jQuery object of a List Element
// the text part adds the text too it (aka, html you were wanting)
// the last part appends the Li to the END of the UL
$("<li />").text(data[x].Name).appendTo($this);
};
});
Final result without comments, is very short and sweet
没有评论的最终结果，很短很甜蜜
$.post("/Plans/GetPlanCounties/", { planId: $("#PlanId").val() }, function(data) {
var $this = $("#SavedCounties").empty();
for (x in data) {
$("<li />").text(data[x].Name).appendTo($this);
};
});
