用Javascript中的JSON数组填充HTML

Populate HTML with JSON array in Javascript

本文关键字：填充 HTML 数组 JSON Javascript 中的      更新时间：2024-04-26

这个问题已经被问了好几次了，但我还没有看到任何对我有效的回答。

我有一段用cakeHP构建的代码，它成功地返回了JSON格式的数据，但我还无法使用Javascript将这些JSON数据插入到HTMLdiv中。

$('.book-click').click(function (e) {
    e.preventDefault();
    var getHotel = $(this).attr('hotel-id');
    $.ajax({
        type: "POST",
        url: "<?php echo $this->Html->URL(array('action' => 'postBook')); ?>",
        data: {
            hotel: getHotel
        },
        cache: false,
        dataTye: "json",
        success: function (JSONObject) {
            var myData = "";
            for (var key in JSONObject) {
                if (JSONObject.hasOwnProperty(key)) {
                    myData += JSONObject[key];
                }
            }
            /*console.log(myData);*/
            alert(myData[key]["hotelname"]); //Giving undifined in alert
        }
    });
});

这是我在浏览器控制台上记录数据时得到的JSON数据：

[
    {
        "id": "11",
        "hotelname": "Sheraton hotel",
        "hoteladdress": "Abule Ikeja",
        "state": "Lagos State",
        "lga": "Ikeja",
        "hotelphone": "65645545454",
        "hotelwebsite": "",
        "adminphone": "6565656565",
        "adminemail": "mail@hotel.com",
        "hotelemail": "",
        "facilities": ",,",
        "roomscategory": "Diplomatic",
        "standardrate": "150000",
        "leanrate": "",
        "aboutHotel": "",
        "requestStatus": "0",
        "createdOn": "1424360902",
        "updatedOn": "1424360902"
    }
]

如何成功地将JSON数据转换为HTML。类似这样的东西：

$('#myDiv').html(myData[key]["hotelname"]);

我试过这个，但它只是给了我Undefined。

感谢您的帮助。

使用$.each()迭代：

success: function (JSONObject) {
    $.each(JSONObject, function(k,item){
       $('#myDiv').html(item.hotelname);
    });
}


var json = [
    {
        "id": "11",
        "hotelname": "Sheraton hotel",
        "hoteladdress": "Abule Ikeja",
        "state": "Lagos State",
        "lga": "Ikeja",
        "hotelphone": "65645545454",
        "hotelwebsite": "",
        "adminphone": "6565656565",
        "adminemail": "mail@hotel.com",
        "hotelemail": "",
        "facilities": ",,",
        "roomscategory": "Diplomatic",
        "standardrate": "150000",
        "leanrate": "",
        "aboutHotel": "",
        "requestStatus": "0",
        "createdOn": "1424360902",
        "updatedOn": "1424360902"
    }
]
$.each(json, function(i, item){
    $('body').append(item.hotelname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

根据您的错误，您似乎要么没有有效的json，要么是json字符串。所以在环入之前，你必须解析它：

success: function (JSONObject) {
    var data = $.parseJSON(JSONObject); // parse it
    $.each(data, function(k,item){
       $('#myDiv').html(item.hotelname);
    });
}

var myData = "";
for (var key in JSONObject) {
   if (JSONObject.hasOwnProperty(key)) {
       myData += JSONObject[key];
   }
}

这里的CCD_ 3只是一个CCD_。因此，调用myData[key]["hotelname"]将返回undefined，因为您试图访问不存在的东西。

为什么不直接使用Ajax调用的结果呢？

相关文章：