Trouble printing JSON objects to HTML with javascript

Question

I have the following ajax code to handle the ajax request of a search form.

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

If required parameters are selected and submitted results are given in JSON Objects. eg 5 objects but the java script code prints all the rows of the db table (all 10 rows). What wrong am I doing here ? Detailed JSON objects

Answer 1

What you're getting is an array of objects. So access your object you have to go to that index and get the object.

eg : data[0].start

Or you can use for loop.

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

You just need to loop through your data.

Answer 3

The variable data is the entire Json object, you need to iterate through this object and append each of the objects.

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

This way you're iterating and appending the results. On a new Ajax call you may want to remove everything so you don't mix results from different calls.

Hope this helps