jQuery 如何从 JSON 数组创建列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19614970/
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
How To Create List From JSON Array?
提问by rolodex
I have problem understanding arrays and loops, therefore this task is a bit confusing to me. Here's my stuff;
我在理解数组和循环方面有问题，因此这个任务对我来说有点混乱。这是我的东西；
JSON
JSON
{
"states": [
{
"name":"johor" ,
"command":"view_johor" },
{
"name":"selangor" ,
"command":"view_selangor" },
{
"name":"melaka" ,
"command":"view_melaka" },
{
"name":"kuala lumpur" ,
"command":"view_kl" },
{
"name":"penang" ,
"command":"view_penang" }
]
}
JAVASCRIPT
爪哇脚本
$(function(){
$.ajax({
type : 'GET',
url : 'scripts/list.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result){
$.each(result, function(index, val){
for(var i=0; i < val.length; i++){
var item = val[i];
console.log(item.name)
}
});
},
});
});
My problem is I don't know how to use the loop it so that my HTML will return like this:
我的问题是我不知道如何使用循环，以便我的 HTML 会像这样返回：
<ul>
<li><a href="#view_johor">Johor</a></li>
<li><a href="#view_selangor">Selangor</a></li>
<!-- and so on, dynamically depending on json... -->
</ul>
I can access the data via console.log(item.name)and such, but I can't manipulate the data so that it will display like I wanted. I don't even know the term to use to search for questions, as I know this is like basic array stuff....Thank you in advance for your help!
我可以通过console.log(item.name)诸如此类的方式访问数据，但我无法操作数据使其按照我想要的方式显示。我什至不知道用于搜索问题的术语，因为我知道这就像基本的数组内容......在此先感谢您的帮助！
回答by Vicky Gonsalves
u can do it :
你可以做到的 ：
$(function(){
$.ajax({
type : 'GET',
url : 'scripts/list.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result){
var buffer="";
$.each(result, function(index, val){
for(var i=0; i < val.length; i++){
var item = val[i];
console.log(item.name);
buffer+=" <li><a href='#"+item.name+"'>"+item.name+"</a></li> <li><a href='#"+item.command+"'>"+item.command+"</a></li>";
}
$('ul').html(buffer);
});
}
});
});
回答by Mat J
Jquery can create elements and append to your documents with few lines of code.
Jquery 可以用几行代码创建元素并附加到您的文档中。
You can create an empty list like this.
您可以像这样创建一个空列表。
var mylist=$("<ul></ul>");
Then inside your forloop, for each item, do something like this
然后在你的for循环中，对于每个项目，做这样的事情
mylist.append($("<li></li>").text(item.name));
And finally append your newly built list to your document to get it displayed:
最后将您新建的列表附加到您的文档中以显示它：
mylist.appendTo($("body"));
回答by Md. Ashaduzzaman
This should work :
这应该工作：
Get the json file you want to read from, make a list of items using the key and values of the json data.And finally add the list inside a ul and append it to body.
获取要读取的 json 文件，使用 json 数据的键和值制作项目列表。最后将列表添加到 ul 中并将其附加到正文。
$.getJSON( "jsonFile.json", function( data ) {
var items = [];
$.each( data, function( key, val1 ) {
$.each(val1, function(){
items.push( "<li><a href=#'" + this.command + "'>" + this.name + "</a></li>" );
});
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
回答by Rasool Ghafari
I'm checked this script and this works properly:
我检查了这个脚本，它可以正常工作：
var records = {
"states": [
{
"name": "johor",
"command": "view_johor"
},
{
"name": "selangor",
"command": "view_selangor"
},
{
"name": "melaka",
"command": "view_melaka"
},
{
"name": "kuala lumpur",
"command": "view_kl"
},
{
"name": "penang",
"command": "view_penang"
}
]
};
$.each(records.states, function (key, val) {
$('#ul').append($('<li>').text('name: ' + val.name + ', command: ' + val.command));
});
and this is html:
这是 html：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<ul id="ul"></ul>
</body>
</html>
回答by Paul Draper
Making very minor adjustments to your code,
对您的代码进行非常小的调整，
var a = [];
$.each(result, function(index, val){
for(var i=0; i < val.length; i++){
var item = val[i];
a.push(item);
}
});
Now do something with all of the values in the array a.
现在对数组中的所有值进行处理a。
EDIT:
编辑：
In case that wasn't enough,
如果这还不够，
var list = $('<ui></ui>');
$.each(result.states, function(state) {
var link = $('<a></a>').prop('href', state.command).text(state.name);
('<li></li>').append(link).appendTo(list);
});
listis the HTML you want (except for the name capitalization...I wasn't sure if the first letter should be capitalized, or the first letter of each word, so I left that alone).
list是您想要的 HTML（名称大写除外……我不确定第一个字母是否应该大写，还是每个单词的第一个字母，所以我不理会）。
