0

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

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

但这不会正确输出“地址”块。

4

2 回答 2

3

使用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);

您的输出将是 在此处输入图像描述我希望这会有所帮助。

于 2012-08-21T05:30:05.407 回答
0

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

假设：数据是一个数组，每个数组元素都是一个对象（散列）。仅在 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>

产生：

  • 姓名 = 约翰
  • 公司 = 能源部
  • 街道 = 123 大街
  • 城市 = 旧金山
  • 姓名 = 简
  • 公司 = 约翰逊
  • 街 = 57 亨氏巷
  • 城市 = 达拉斯
于 2012-08-21T03:56:50.233 回答