Question

我有一个嵌套格式的JSON数据文件。我想遍历这些数据并以JQuery listview的形式输出，但我无法这样做。

JSON数据采用以下格式：

{
  "Name":"A",
  "Company": "B",
  "Address": {
    "Street":"ABC",
    "City":"XYZ"
  }
}

我尝试了以下内容：

$.each(data, function(key,value) {
   $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+value+'</span></li>');
});

但是这不能正确输出'Address'块。

Answer 1

如何使用 value.Address.City 和 value.Address.Street ？访问JSON数据的最常用方法是通过点表示法。这只是对象名称后跟一个句点，然后是您想要访问的名称/属性。 http://www.hunlock.com/blogs/Mastering_JSON_%28_JavaScript_Object_Notation_%29

例如，

$.each(data, function(key,value) {
    $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
});

详细编码，

<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function display(data) {
            $.each(data, function(key,value) {
                $('#companyDetails').append('<li>'+key+'<span class="ui-li-aside">'+ value.Address.Street + "," + value.Address.City +'</span></li>');
            });
        }
        $(document).ready(function() {
            var data = [
                {
                    "Name" : "ABC",
                    "Company" : "AA Company",
                    "Address" : {
                        "Street" : "123 Main Street",
                        "City" : "Yangon"
                    }
                },
                {
                    "Name" : "DEF",
                    "Company" : "BB Company",
                    "Address" : {
                        "Street" : "8941 Mandalay",
                        "City" : "NaypiDaw"
                    }
                }           
            ];
        display(data);
        });
    </script>
</head>
<body>
<div id="companyDetails"></div>
</body>
</html>

对于您不知道json文件中包含哪些数据的情况，

function display(data,flag) {
    $.each(data, function(key,value) {
    if ($.isPlainObject(value)) {
        if(flag == true)
        {
            $('#companyDetails').append('<b>' + "Company " + (key + 1) + '</b>');
        }
        display(value,false);
    }
    else
        $('#companyDetails').append('<li>' + key +  " : " +'<span class="ui-li-aside">'+ value +'</span></li>');
    });
}

在调用显示功能时，

var flag = true;
display(data,flag);

你的输出会是 enter image description here 我希望这会有所帮助。

Answer 2

我不知道这是否是最有效的方式，但我认为它可以满足您的需求。

假设：数据是一个数组，每个数组元素都是一个对象（哈希）。仅在Windows上通过Chrome测试。

<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function read_record(data) {
            $.each(data, function(key,value) {
                if ($.isPlainObject(value))
                    read_record(value);
                else
                    $('#details').append('<li>' + key + ' = ' + value + '</li>');
            });
        }

        $(document).ready(function() {
            var data = [
                {
                    "Name" : "John",
                    "Company" : "Doe",
                    "Address" : {
                        "Street" : "123 Main Street",
                        "City" : "San Francisco"
                    }
                },
                {
                    "Name" : "Jane",
                    "Company" : "Johnson",
                    "Address" : {
                        "Street" : "57 Heinz Lane",
                        "City" : "Dallas"
                    }
                }           
            ];

            read_record(data);
        });
    </script>
</head>
<body>
<ul id="details"></ul>
</body>
</html>

产地：

姓名=约翰
公司= Doe
Street = 123 Main Street
City =旧金山
姓名= Jane
公司=约翰逊
Street = 57 Heinz Lane
City = Dallas

遍历和打印嵌套的JSON数据

2 个答案: