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

nkshio · Accepted Answer · 2018-09-10T11:44:58.133

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 :)

edited Sep 10 '18 at 11:44

answered Sep 09 '18 at 18:31

nkshio

1,060
1
14
23

I edited like this. But , still , I get only 1 response to the table. How can I Fix this ?? – Kistlak Rajapaksha Sep 10 '18 at 05:04
I have updated my answer. This should definitely unblock you. Keep me in the loop :) – nkshio Sep 10 '18 at 11:12
It Worked !! And also how can get `data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItineraryPricingInfo[0].ItinTotalFare.BaseFare.Amount` and `data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[0].FlightSegment[0].TPA_Extensions.Mileage.Amount`. I tried like this. But , I couldn't get the response. – Kistlak Rajapaksha Sep 12 '18 at 06:25
hint - use a debugger to check values till previous keys of the nested JSON (one after another) – nkshio Sep 12 '18 at 06:51
I tried.. But , I couldn't do it.. Please if you can , give me some help.. – Kistlak Rajapaksha Sep 12 '18 at 17:13

Append rows in HTML table with jquery is not working

1 Answers1