javascript 使用 JQuery 将 JSON 项添加到 HTML 列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22167376/
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
Adding JSON items to an HTML list using JQuery
提问by Pierre Nortje
I am adding items from a JSON file using JQuery to an HTML page dynamically.
我正在使用 JQuery 将 JSON 文件中的项目动态添加到 HTML 页面。
HTML:
HTML：
<div id='cssmenu'>
<ul id='options'>
<li class='active'><a href='#'><span>Home</span></a>
<ul id='home'></ul></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul id='product_list'></ul></li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul id='company'></ul></li>
<li class='has-sub'><a href='#'><span>Contact</span></a>
<ul id='contact'></ul></li>
</ul>
</div>
JQuery:
查询：
$(document).ready(function () {
$.getJSON('../JSON/cwdata.json', function (cwData) {
// Add the product categories
$.each(cwData.product, function (i, product) {
var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');
$('#product_list').append(option_cate);
// Add the product names
$.each(product.items, function (i, item) {
var option_name = ('<ul class="details" style="display: none;"><li class="name"><a href="#">' + item.name + '</a></li></ul>');
$(".item").append(option_name);
}); //$.each(...)
}); //$.each(...)
}); //$.getJSON
}); //$document
JSON(cwdata.json file):
JSON（cwdata.json 文件）：
{
"product": [
{
"category": "Product 1",
"items": [
{
"name": "Item 1.1",
"name": "Item 1.2"
}
]
},
{
"category": "Product 2",
"items": [
{
"name": "Item 2"
}
]
},
{
"category": "Product 3",
"items": [
{
"name": "Item 3"
}
]
}
]
}
The problem is the data is being added the wrong way. The HTML looks like this after the page has been loaded:
问题是数据以错误的方式添加。页面加载后的 HTML 如下所示：
.
.
Item 1, Item 2 and Item 3 are being added to Product 1, whereas I only want all the "items" under "Product 1" to be in the the Product 1 list.
项目 1、项目 2 和项目 3 被添加到产品 1，而我只希望“产品 1”下的所有“项目”都在产品 1 列表中。
Basically:
基本上：
Product 1
- Item 1.1
- Item 1.2
But I am getting:
但我得到：
Product 1
- Item 1.1
- Item 2
- Item 3
Any tips would be appreciated.
任何提示将不胜感激。
回答by Mohammed R. El-Khoudary
Ok.. I found several bugs in your solution..
好的.. 我在你的解决方案中发现了几个错误..
First this is a modified working version
Now please note that your iteration:
现在请注意您的迭代：
$.each(product.items, function (i, item) {
Does not iterate properly because you have only one object inside the array so instead each item should be an independent object {"name": "bla bla bla"}
不能正确迭代，因为数组中只有一个对象，所以每个项目都应该是一个独立的对象 {"name": "bla bla bla"}
Second you append the items to ALL .item and add a UL for every item and that's also buggy.. please review my code and let me know if it helps.
其次，您将项目附加到 ALL .item 并为每个项目添加一个 UL，这也有问题。请查看我的代码，如果有帮助，请告诉我。
回答by mridula
Your json is wrong. For example:
你的 json 是错误的。例如：
Instead of
代替
"items": [
{
"name": "Item 1.1",
"name": "Item 1.2"
}
]
It should be:
它应该是：
"items": [
{ "name": "Item 1.1" },
{ "name": "Item 1.2" }
]
Once that is corrected, you can change your code as -
更正后，您可以将代码更改为-
$.each(cwData.product, function (i, product) {
var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');
$('#product_list').append(option_cate);
var html = '<ul class="details">';
$.each(product.items, function (i, item) {
html += ('<li class="name"><a href="#">' + item.name + '</a></li>');
});
html += '</ul>'
$('#product_list').append(html);
});
回答by alpakyol
You are appending results to the class itemwhich exists in three places. So it is appended to the three <li class="items">.
您将结果附加到item存在于三个位置的类。所以它被附加到三个<li class="items">.
Try giving id to your <li>tags like <li id="product1">...instead <li class="item">
先给ID到你的<li>标签，如<li id="product1">...代替<li class="item">
回答by francadaval
This:
这：
$(".item").append(option_name);
selects all html tags with class item. So you are appending the details to all existing <li class="item">.
选择所有带有 class 的 html 标签item。因此，您将详细信息附加到所有现有<li class="item">.
Use a more especific selector to add the new content to your list element.
使用更具体的选择器将新内容添加到您的列表元素。
回答by Raghbendra Nayak
As per my view you have to correct your JSON like:
根据我的观点，您必须更正您的 JSON，例如：
{
"product": [
{
"category": "Product 1",
"items": ["Item 1-1","Item 1-2","Item 1-3"]
},
{
"category": "Product 2",
"items": ["Item 2-1","Item 2-2","Item 2-3"]
},
{
"category": "Product 3",
"items": ["Item 3-1", "Item 3-2","Item 3-3"]
}
]
}
Then use below code I hope it will work for you:
然后使用下面的代码，我希望它对你有用：
<script>
$(document).ready(function () {
$.getJSON('cwdata.json', function (cwData) {
// Add the product categories
$.each(cwData.product, function (i, product) {
var option_cate = ('<li class="item'+i+'"><a href="#">' + product.category + '</a></li>');
//alert(dump(product.items));
//alert(product.items.length);
$('#product_list').append(option_cate);
// Add the product names
for(var k=0;k<(product.items.length);k++){
var option_name = ('<ul class="details"><li class="name"><a href="#">' + product.items[k] + '</a></li></ul>');
//console.log(option_name);
$(".item"+i).append(option_name);
}
}); //$.each(...)
}); //$.getJSON
}); //$document
</script>
Enjoy..... :)
享受..... ：）
回答by Mahesh singh chouhan
It will be work
这将是工作
Use json formate like this
像这样使用json格式
{
"product": [
{
"category": "Product 1",
"items": [
{ "name": "Item 1.1" },
{ "name": "Item 1.2" }
]
},
{
"category": "Product 2",
"items": [
{
"name": "Item 2"
}
]
},
{
"category": "Product 3",
"items": [
{
"name": "Item 3"
}
]
}
]
}
And correct your script like
并更正您的脚本，例如
$(document).ready(function () {
$.getJSON('test.json', function (cwData) {
// Add the product categories
$.each(cwData.product, function (i, product) {
var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');
$('#product_list').append(option_cate);
// Add the product names
$.each(product.items, function (i, item) {
var option_name = ('<ul class="details" style=""><li class="name"><a href="#">' + item.name + '</a></li></ul>');
$(".item:last").append(option_name);
}); //$.each(...)
}); //$.each(...)
}); //$.getJSON
}); //$document
I hope it will work.
我希望它会起作用。
回答by Firos Shamsudeen
If you are getting json data as a string from c#, then you need to parse to json in javascript.
如果您从 c# 获取 json 数据作为字符串，那么您需要在 javascript 中解析为 json。
function success(response) {
$('.listboxclass').empty();
$('.listboxclass').append('<option value="0">Select</option>');
$.each(JSON.parse(response.d), function(i, obj) {
$('.listboxclass').append('<option value="'+obj.id+'">'+obj.name+'</option>');
});
}
Here listboxclass is the classname of the listbox.
这里 listboxclass 是列表框的类名。
Here is the c# web method code which returns to ajax call.
这是返回 ajax 调用的 c# web 方法代码。
[WebMethod]
public static string GetScreenList(string tId)
{
return "[{\"id\":\"1\",\"name\":\"aaa\"},{\"id\":\"2\",\"name\":\"bbb\"}]";
}
