5

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

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)，但我无法操作数据以使其按我想要的方式显示。我什至不知道用来搜索问题的术语，因为我知道这就像基本的数组东西......提前感谢您的帮助！

4

5 回答 5

8

你可以的 ：

 $(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);
    });
  }
 });
});
于 2013-10-27T05:41:38.690 回答
0

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

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

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

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

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

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

mylist.appendTo($("body"));
于 2013-10-27T05:40:17.687 回答
0

这应该工作：

获取要读取的 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" );
});
于 2013-10-27T05:40:59.410 回答
0

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

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>
于 2013-10-27T06:03:32.773 回答
-1

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

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（名称大写除外......我不确定第一个字母是否应该大写，或者每个单词的第一个字母，所以我不理会它）。

于 2013-10-27T05:30:14.317 回答