無法使用javascript將JSON對象打印為HTML

Question

我有以下ajax代碼來處理搜索表單的ajax請求。

$(document).ready(function() {
$('#alert-message-warning').hide();
$('.shadow-z-1').hide();
$('#dateprice-search').on('click', '#btn-search', function() { 
    $.ajax({
        type: 'post',
        url: '/date-price',
        data: {
            '_token': $('#csrf').val(),
            'product_id': $("#product_id").val(),
            'start': $("#start").val(),
            'end': $("#end").val()
        },
        success: function(data) {
            console.log(Object.keys(data).length);
            console.log(data);
            var cha = Object.keys(data).length;
            if (cha > 0) {
                $('.shadow-z-1').show();
                $('.shadow-z-1').append("<tr class='liquid-row><td>" + data.start + "</td><td>"+ data.end + "</td><td>" + data.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>");
            }
            else{
                $('#alert-message-warning').show();
                $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){
                    $("#alert-message-warning").slideUp(5000);
                });                 
            }
        }
    });
  });
});

如果選擇了必需的參數，並且在JSON對象中給出了提交的結果。 例如5個對象，但是Java腳本代碼會打印db表的所有行（所有10行）。 我在這里做什么錯？ 詳細的JSON對象

Answer 1

您得到的是一系列對象。 因此，訪問您的對象，您必須轉到該索引並獲取該對象。

例如： data[0].start

或者您可以使用for循環。

for(let i in data) {
    console.log(data[i].start + "\t" + data[i].end);
}

Answer 2

$(document).ready(function() {
    $('#alert-message-warning').hide();
    $('.shadow-z-1').hide();
    $('#dateprice-search').on('click', '#btn-search', function() { 
        $.ajax({
            type: 'post',
            url: '/date-price',
            data: {
                '_token': $('#csrf').val(),
                'product_id': $("#product_id").val(),
                'start': $("#start").val(),
                'end': $("#end").val()
            },
            success: function(data) {
                console.log(Object.keys(data).length);
                console.log(data);
                var cha = Object.keys(data).length;
                $('.shadow-z-1').show();
                if (cha > 0) {
                    for (var i = 0; i < data.length; i++) {

                        $('.shadow-z-1').append("<tr class='liquid-row><td>" + data[i].start + "</td><td>"+ data[i].end + "</td><td>" + data[i].end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>");
                    }
                }
                else{
                    $('#alert-message-warning').show();
                    $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){
                        $("#alert-message-warning").slideUp(5000);
                    });                 
                }
            }
        });
      });
    });

您只需要遍歷數據。

Answer 3

變量數據是整個Json對象，您需要遍歷此對象並追加每個對象。

data.foreach(function(obj) {
    $('.shadow-z-1').append("<tr class='liquid-row><td>" + obj.start + "</td><td>"+ obj.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
} )

這樣，您就可以迭代並附加結果。 在新的Ajax調用中，您可能希望刪除所有內容，以免混淆來自不同調用的結果。

希望這可以幫助