javascript - 将json数据转换为HTML

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4年前关闭。
                    
                
        

我有一个嵌套的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>

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

最佳答案

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

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

}());