无法使用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调用中，您可能希望删除所有内容，以免混淆来自不同调用的结果。

希望这可以帮助