javascript - 如何从 JSON 数组创建列表？

Question

我在理解数组和循环方面有问题，因此这个任务让我有点困惑。这是我的东西；

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 将像这样返回:

<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>

我可以通过 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+=" <li><a href='#"+item.name+"'>"+item.name+"</a></li> <li><a href='#"+item.command+"'>"+item.command+"</a></li>"; 
      } 
      $('ul').html(buffer);
    });
  }
 });
});