javascript - 将 json 数据转为 HTML

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

}());