如何从 JSON 数组创建列表？答案

【问题标题】：How To Create List From JSON Array?如何从 JSON 数组创建列表？
【发布时间】：2013-11-06 01:19:15
【问题描述】：

我无法理解数组和循环，因此这个任务让我有点困惑。这是我的东西；

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

【问题讨论】：

本站有 100 多篇文章......网上有很多关于如何将 json 解析为 html 的教程......多做一些搜索

标签： javascript jquery json

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

【讨论】：

-1 更改不会创建 html 或将 OP 引导到有用的方向
“我可以通过 console.log(item.name) 等方式访问数据，但我无法操作数据”。现在他可以操作数据了。
@charlietfl，这里的响应者最糟糕的是不值得投票，反对票会适得其反。我的意见。
它源于我将“JSON to list”误解为“JSON to array”而不是“JSON to HTML list”（顺便说一句，这有点像说“XML to Http”......非常具体）

【解决方案2】：

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

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

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

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

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

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

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

【讨论】：

【解决方案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" );
});

【讨论】：

U r 缺少 # in href
也许我应该先将items 转换为字符串？ HTML 打印了五次 [Object, Object]。
@rolodex，我已经更新了答案。它工作正常。

【解决方案4】：

你可以做到的：

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

【讨论】：

这是我的控制台Can't find variable: buffer
对不起。我的错。忘记在上面创建var = buffer。
谢谢@Vicky。多亏了你，我才能成为更好的开发者！
不！如果item.name 包含 HTML 实体怎么办？

【解决方案5】：

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

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>

【讨论】：