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);
    });
  }
 });
});

Answer 2

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

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

 var mylist=$("<ul></ul>");

然后在for循环内，对于每个项目，执行类似这样的操作

mylist.append($("<li></li>").text(item.name));

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

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

Answer 3

这应该有效：

获取要读取的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" );
});

Answer 4

我已经检查了这个脚本，这可以正常工作：

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));
            });

这是html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <ul id="ul"></ul>
</body>
</html>

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 = $('<ui></ui>');
$.each(result.states, function(state) {
    var link = $('<a></a>').prop('href', state.command).text(state.name);
    ('<li></li>').append(link).appendTo(list);
});

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

如何从JSON数组创建列表？

5 个答案: