Using Ajax to loop through nested Array to retrieve data

Question

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>

booking_status is an array... How do you want to display that data in your table? You're going to have to get one element from the array, or iterate over it... — Cerbrus
– Cerbrus, Commented Sep 22, 2021 at 7:13
You're also iterating over data twice. (for loop and data.forEach) remove the for loop, it's redundant — Cerbrus
– Cerbrus, Commented Sep 22, 2021 at 7:15
1) You don't need a second $(document).ready function. 2) You don't need a forEach inside that other loop. The first one will be able to access the data. 3) But booking_status is an array so you will to loop over that to access that data depending on what you need your output to look like. — Andy
– Andy, Commented Sep 22, 2021 at 7:15
the json you have provided here have a error your first object is missing closing curly bracket and comma — Amir Rahman
– Amir Rahman, Commented Sep 22, 2021 at 7:16
The document is only ready once. This event happens only once per page load. In your code, for some reason you are adding many many listeners for this event that already happened (it already happened, because the whole code is already executed after $(document).ready). — Jeremy Thille
– Jeremy Thille, Commented Sep 22, 2021 at 7:23

Cerbrus · Accepted Answer · 2021-09-22 07:21:35Z

2

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

answered Sep 22, 2021 at 7:21

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lee thunder Over a year ago

Thank you so much, that was really helpful, I am very grateful for the explanation more than any thing. Thank you for pointing out my mistakes. Quick question though, is there a way to return for example the status of the booking based on the current time? you now how there are multiple bookings for one item. Rather than returning all of them, I would like to return only one value based on the current time if it makes sense. So one status cell on the table based on the current time. What logic would achieve this?

Cerbrus Over a year ago

Yea, that's possible, but you'd have to filter the booking_status array, whilst parsing the date strings to date objects. (new Date('2021-09-27T08:37:00+04:00')). Then you'll have to take care of the possibility that there's no results from that filter.

lee thunder Over a year ago

Do you mean using Array.prototype.filter()? can you please elaborate!

lee thunder Over a year ago

Do you mean something like this ---> let currentDate = new Date() const result = item.booking_status.map(s => s.status).join.filter(status = currentDate); console.log(result); this code is absolute wrong, I never used this method so I need to see tutorials first to apply it correctly, but is this what you meant??

Cerbrus Over a year ago

I suggest you look up some documentation on filter and Date, indeed. You'll need to filter the booking_status array, then get the first result from that, and get the status string from that result.

|

Collectives™ on Stack Overflow

Using Ajax to loop through nested Array to retrieve data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related