Question

我有一个嵌套的Json数组，如下所示：

{
    "areas": [
        {
            "areaCode": "1",
            "entry": [
                {
                    "name": "John Doe",
                    "city": "Springfield",
                    "phonenumber": "000000000",
                    "date": "2 December 1999",
                    "available": "3 to 4PM",
                },
                {
                    "name": "Jenny Jennifer",
                    "city": "Springfield",
                    "phonenumber": "000000000",
                    "date": "10 December 2009",
                    "available": "5 to 8PM",
                },
                {
                   "name": "Lorem Ipsum",
                    "city": "New York",
                    "phonenumber": "000000000",
                    "date": "2 May 1979",
                    "available": "3 to 4PM",
                },
              ],
       }
     ],
}

这实际上只是整个文件的一小部分（3000 +行）。

我正在尝试将此数据转换为html元素，以及我到目前为止所获得的内容：

var createArrayData = ( function() {
    var dataRef = '/lib/json/data.json';
    var json_obj;
    $.getJSON(dataRef, function(data){

        var json_obj = data;
        console.log(json_obj);
    })

}());

我管理控制台将实际数据记录为对象，但是当我使用foreach将数据转换为HTMl时，它实际上并不起作用......

我想最终得到类似的东西：

<div>
    <h1>data.areaCode</h1>
    <ul>
        <li>
            <p>name</p>
            <p>city</p>
            <p>phonenumber</p>
            <p>date</p>
            <p>available</p>
        </li>
    </ul>
</div>

当然必须为数组中的每个项目打印

Answer 1

我认为你正在寻找这样的东西：

function getHTML(json) {
  var result = "";
  for (var i in json.areas) {
    var area = json.areas[i];
    result += "<div>";
    result += "<h1>" + area.areaCode + "</h1>";
    result += "<ul>";
    for (var j in area.entry) {
      var entry = area.entry[j];
      result += "<li>";
      result += "<p>" + entry.name + "</p>";
      result += "<p>" + entry.city + "</p>";
      result += "<p>" + entry.phonenumber + "</p>";
      result += "<p>" + entry.date + "</p>";
      result += "<p>" + entry.available + "</p>";
      result += "</li>"
    }
    result += "</ul>";
    result += "</div>";
  }
  return result;
}

var createArrayData = ( function() {
    var dataRef = '/lib/json/data.json';
    var json_obj;
    $.getJSON(dataRef, function(data){

        var json_obj = data;
        $('.output').html(getHTML(json_obj));
    })

}());

Answer 2

嗨，这是一个如何使用简单的For循环遍历JSON对象的示例..只需取消注释我在文档准备中注释的行。

<强> JSFiddle of it in action.

function getHTML(json) {
    var result = "";
    for (i = 0; i < json.areas.length; i++) {
        result += "<div>";
        result += "<h1>" + json.areas[i].areaCode + "</h1>";
        result += "<ul>";
        for (j = 0; j < json.areas[i].entry.length; j++) {
            var e = json.areas[i].entry[j];
            result += "<li>";
            result += "<p>" + e.name + "</p>";
            result += "<p>" + e.city + "</p>";
            result += "<p>" + e.phonenumber + "</p>";
            result += "<p>" + e.date + "</p>";
            result += "<p>" + e.available + "</p>";
            result += "</li>"
        }
        result += "</ul>";
        result += "</div>";
    }
    return result;
}
$(document).ready(function() {
    //var dataRef = '/lib/json/data.json';
    //$.getJSON(dataRef, function (data) {
        $('.result').html(getHTML(JSON2));//change JSON2 to data;
    //}
});

Answer 3

你可以做的是使用$ .ajax（{}）;我修改了我的解决方案以使用.forEach，并输出你的json数据。您在原始帖子中的json数据有一些错误。所有逗号都必须删除。拿下面并运行它，您的数据将按照您的意愿输出。我也刚刚更新以显示areaCode，我之前忘记了它。

现在包括一个JSFiddle：http://jsfiddle.net/37u1ywvz/1/

更新我的代码，因为海报必须不喜欢我没有使用他们的HTML结构。

jQuery(document).ready(function($){

    $.ajax({
        url: 'jsondata.json',
        dataType: 'json',
        cache: false,
        method: 'POST',
        success: function(data){
            listData(data);
        },
        error: function(){
            $('#dataoutput').html('Error: Data not available.');
        }
    });

});

function listData(str){

    str.areas.forEach(function(area) {
        area.entry.forEach(function(element) {

            $('#dataoutput').append(
                '<div>' + 
                    '<h1>Area Code: ' + area.areaCode + '</h1>' + 
                    '<ul>' + 
                        '<li>' + 
                            '<p>Name: ' + element.name + '</p>' + 
                            '<p>City: ' + element.city + '</p>' + 
                            '<p>Phone Number: ' + element.phonenumber + '</p>' + 
                            '<p>Date: ' + element.date + '</p>' + 
                            '<p>Available: ' + element.available + '</p>' +
                        '</li>' + 
                    '</ul>' + 
                '</div>'
            );
        });
    });

正确格式化JSON数据，修复原始帖子中的错误：

{
    "areas": [
        {
            "areaCode": "1",
            "entry": [
                {
                    "name": "John Doe",
                    "city": "Springfield",
                    "phonenumber": "000000000",
                    "date": "2 December 1999",
                    "available": "3 to 4PM"
                },
                {
                    "name": "Jenny Jennifer",
                    "city": "Springfield",
                    "phonenumber": "000000000",
                    "date": "10 December 2009",
                    "available": "5 to 8PM"
                },
                {
                    "name": "Lorem Ipsum",
                    "city": "New York",
                    "phonenumber": "000000000",
                    "date": "2 May 1979",
                    "available": "3 to 4PM"
                }
            ]
        }
    ]
}

将json数据转换为HTML

3 个答案: