Using Ajax to loop through nested Array to retrieve data-CodePudding

Good Morning, using ajax call I am trying to return the values of a nested json array, I was successful to pull the data except for the nested array "booking_status". When I try loop through the 'booking_status', I git the value [object Object],[object Object],[object Object] . If I try to specify a value for example item.booking_status.status I get this undefined.

This is my nested array

[
    {
        "id": 1,
        "item_name": "Misrry",
        "author": "Stephen King",
        
        "booking_status": [
            {
                "check_in": "2021-09-22T08:27:00 04:00",
                "check_out": "2021-09-23T08:27:00 04:00",
                "status": "Currently Booked"
            },
            {
                "check_in": "2021-09-25T08:37:00 04:00",
                "check_out": "2021-09-26T08:37:00 04:00",
                "status": "Currently Free"
            },
            {
                "check_in": "2021-09-27T08:37:00 04:00",
                "check_out": "2021-09-28T08:37:00 04:00",
                "status": "Currently Free"
            }
        ]

{
        "id": 2,
        "item_name": "Rose Red",
        "author": "Stephen King",
        
        "booking_status": [
            {
                "check_in": "2021-09-22T08:27:00 04:00",
                "check_out": "2021-09-23T08:27:00 04:00",
                "status": "Currently Booked"
            },
            {
                "check_in": "2021-09-25T08:37:00 04:00",
                "check_out": "2021-09-26T08:37:00 04:00",
                "status": "Currently Free"
            }
           
        ]
}
]

and this is my script:

<script>
$(document).ready(function () {
    $.ajax({
        url: 'http://localhost:8000/', 
       
        
        dataType: 'JSON',
        success: function (data) {
            for (var i = 0; i < data.length; i  ) {
                $(document).ready(function () {
                    var content = ''
                    data.forEach(item => {

                        content  = "<tr><td>"
                              item.item_name   "</td><td>"
                              item.author   "</td><td>"   item.booking_status
                              "</td></td></tr>"
    
                    })

                
                    $('#table_body').html(content);

                })

            }
        }
    });
});
</script>

CodePudding user response：

You have a couple of mistakes in your code.

You're iterating over data twice. (for loop and data.forEach);
Remove the for loop, it's redundant.
booking_status is an array, so you're going to have to stringify it, or iterate over it somehow.
You don't need to nest $(document).ready. The inner calls can be removed.

$(document).ready(function() {
  $.ajax({
      url: 'http://localhost:8000/',
      dataType: 'JSON',
      success: function(data) {
        var content = '';
        data.forEach(item => {
          content  = "<tr><td>"  
            item.item_name   "</td><td>"  
            item.author   "</td><td>"   item.booking_status.map(s => s.status).join('<br/>')  
            "</td></td></tr>";
        });

        $('#table_body').html(content);
      });
  });
});