如何从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) } }); }, }); }); 

我的问题是我不知道如何使用循环它，以便我的HTML将返回如下：

 
 
Johor
 
Selangor
   

我可以通过console.log(item.name)等访问数据，但我不能操纵数据，以便它显示我想要的。 我甚至不知道用来搜索问题的术语，因为我知道这就像基本的数组一样……提前感谢您的帮助！

Answer 1

你可以的 ：

  $(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+=" 
"+item.name+"
 
"+item.command+"
"; } $('ul').html(buffer); }); } }); }); 

Answer 2

Jquery可以使用几行代码创建元素并附加到您的文档。

您可以创建一个这样的空列表。

  var mylist=$("
"); 

然后在你的for循环中，对于每个项目，做这样的事情

 mylist.append($("
").text(item.name)); 

最后将新构建的列表附加到文档中以显示它：

 mylist.appendTo($("body")); 

Answer 3

我检查了这个脚本，这个工作正常：

 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($('
').text('name: ' + val.name + ', command: ' + val.command)); }); 

这是html：

Answer 4

这应该工作：

获取要读取的json文件，使用键和json数据的值创建项目列表。最后在ul中添加列表并将其附加到body。

 $.getJSON( "jsonFile.json", function( data ) { var items = []; $.each( data, function( key, val1 ) { $.each(val1, function(){ items.push( "
" + this.name + "
" ); }); }); $( "
", { "class": "my-new-list", html: items.join( "" ) }).appendTo( "body" ); }); 

Answer 5

对代码进行非常小的调整，

 var a = []; $.each(result, function(index, val){ for(var i=0; i < val.length; i++){ var item = val[i]; a.push(item); } }); 

现在对数组a中的所有值执行某些操作。

编辑：

如果还不够，

 var list = $(''); $.each(result.states, function(state) { var link = $('').prop('href', state.command).text(state.name); ('
').append(link).appendTo(list); }); 

list是你想要的HTML（除了名称大小写...我不确定第一个字母是否应该大写，或者每个单词的第一个字母，所以我单独留下它）。