Append rows in HTML table with jquery is not working

Question

I am using a for loop to append multiple rows in my HTML table using jquery.

The for loop (code below) runs on the response of an ajax call which returns an array of arrays. But only 1 row gets added to the table irrespective of no. of elements in the array.

The actual response object is quite large, so I am attaching a Google Drive link for a reference

How do I append all the rows in the table?

Code snippet (using Jquery)

$(document).ready(function() {
            $('#ghsubmitbtn').on('click', function(e) {

                var data = JSON.stringify(JSONObj);

                $.ajax({
                    url: 'https://api-crt.cert.havail.sabre.com/v4.2.0/shop/flights?mode=live&limit=50&offset=1',
                    method: 'POST',
                    contentType: "application/json; charset=utf-8",
                    data: data,
                    headers: {
                        "Authorization": 'Bearer ' + bat
                    },

                    success: function(data) {
                        var BookBtn = '<input type="submit" value="Book" name="book" class="btn btn-primary">';

                        for (var v = 0; v <= 999; v++) {
                            for (var b = 0; b <= 999; b++) {
                                for (var m = 0; m <= 999; m++) {

                                    var row = $('<tr><td>' + data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].SequenceNumber + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].OperatingAirline.Code + '</td><td>' +
                                        BookBtn + '</td></tr>');

                                    $('#tblData').append(row);
                                }
                            }
                        }
                    }
                });
            });

Answer 1

Issue

JSON Exception in the console for an undefined JSON property

Resolution

Safely Access Deeply Nested Values In JavaScript

Read this article to avoid JSON exceptions in future.

Correction

if (data && data.OTA_AirLowFareSearchRS && data.OTA_AirLowFareSearchRS.PricedItineraries && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m]) {
    // Build row using nested JSON
}

Corrected JSFiddle

---

P.S To quickly debug, you must always check browser console to look for any JSON exceptions. Almost 90% of issues get resolved with the error strings displayed. To understand the real issue, I did the same :)