How to format JSON data to show the result object in different div

Question

So I started using Amadeus REST API , and have been using AJAX call to get data , but now I have to represent that data in certain format , and I am not sure how to loop or show data

function showdataforflights(data) {
    jQuery.each(data, function(index, item) {
        console.log(item.itineraries.outbound.flights.departs_at);
        console.log('wadasd');
    });
};

$("#main_form").on('submit', (function(e) {

    e.preventDefault();

    $('.loader').show();
    $("html, body").scrollTop(0);

    $.ajax({
        url: "./search/amadeus.php", // Url to which the request is send
        type: "POST", // Type of request to be send, called as method
        data: new FormData($('form')[0]), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        processData: false,
        contentType: false,
        success: function(data) // A function to be called if request succeeds
        {
            $('.loader').hide();
            $('#lala').text(JSON.stringify(data.results));
            showdataforflights(data.results);
        }
    });
}));

This is where I'm stuck. I don't know how to loop through the data so that I can show data in particular HTML format .

JSON:

{
    "currency": "USD",
    "results": [
        {
            "itineraries": [
                {
                    "outbound": {
                        "flights": [
                            {
                                "departs_at": "2017-12-30T13:00",
                                "arrives_at": "2017-12-30T15:10",
                                "origin": {
                                    "airport": "DEL",
                                    "terminal": "3"
                                },
                                "destination": {
                                    "airport": "BOM",
                                    "terminal": "2"
                                },
                                "marketing_airline": "AI",
                                "operating_airline": "AI",
                                "flight_number": "863",
                                "aircraft": "744",
                                "booking_info": {
                                    "travel_class": "ECONOMY",
                                    "booking_code": "S",
                                    "seats_remaining": "2"
                                }
                            }
                        ]
                    }
                }
            ],
            "fare": {
                "total_price": "73.39",
                "price_per_adult": {
                    "total_fare": "73.39",
                    "tax": "8.39"
                },
                "restrictions": {
                    "refundable": true,
                    "change_penalties": true
                }
            }
        },
        {
            "itineraries": [
                {
                    "outbound": {
                        "flights": [
                            {
                                "departs_at": "2017-12-30T04:00",
                                "arrives_at": "2017-12-30T06:15",
                                "origin": {
                                    "airport": "DEL",
                                    "terminal": "3"
                                },
                                "destination": {
                                    "airport": "BOM",
                                    "terminal": "2"
                                },
                                "marketing_airline": "AI",
                                "operating_airline": "AI",
                                "flight_number": "349",
                                "aircraft": "788",
                                "booking_info": {
                                    "travel_class": "ECONOMY",
                                    "booking_code": "U",
                                    "seats_remaining": "9"
                                }
                            }
                        ]
                    }
                }
            ],
            "fare": {
                "total_price": "106.99",
                "price_per_adult": {
                    "total_fare": "106.99",
                    "tax": "9.99"
                },
                "restrictions": {
                    "refundable": true,
                    "change_penalties": true
                }
            }
        },
        {
            "itineraries": [
                {
                    "outbound": {
                        "flights": [
                            {
                                "departs_at": "2017-12-30T08:00",
                                "arrives_at": "2017-12-30T10:10",
                                "origin": {
                                    "airport": "DEL",
                                    "terminal": "3"
                                },
                                "destination": {
                                    "airport": "BOM",
                                    "terminal": "2"
                                },
                                "marketing_airline": "9W",
                                "operating_airline": "9W",
                                "flight_number": "336",
                                "aircraft": "73H",
                                "booking_info": {
                                    "travel_class": "ECONOMY",
                                    "booking_code": "H",
                                    "seats_remaining": "1"
                                }
                            }
                        ]
                    }
                }
            ],
            "fare": {
                "total_price": "116.35",
                "price_per_adult": {
                    "total_fare": "116.35",
                    "tax": "45.35"
                },
                "restrictions": {
                    "refundable": true,
                    "change_penalties": true
                }
            }
        },
        {
            "itineraries": [
                {
                    "outbound": {
                        "flights": [
                            {
                                "departs_at": "2017-12-30T06:00",
                                "arrives_at": "2017-12-30T08:05",
                                "origin": {
                                    "airport": "DEL",
                                    "terminal": "3"
                                },
                                "destination": {
                                    "airport": "BOM",
                                    "terminal": "2"
                                },
                                "marketing_airline": "UK",
                                "operating_airline": "UK",
                                "flight_number": "975",
                                "aircraft": "320",
                                "booking_info": {
                                    "travel_class": "PREMIUM_ECONOMY",
                                    "booking_code": "U",
                                    "seats_remaining": "9"
                                }
                            }
                        ]
                    }
                }
            ],
            "fare": {
                "total_price": "122.61",
                "price_per_adult": {
                    "total_fare": "122.61",
                    "tax": "19.61"
                },
                "restrictions": {
                    "refundable": true,
                    "change_penalties": true
                }
            }
        },
        {
            "itineraries": [
                {
                    "outbound": {
                        "flights": [
                            {
                                "departs_at": "2017-12-30T20:05",
                                "arrives_at": "2017-12-30T22:05",
                                "origin": {
                                    "airport": "DEL",
                                    "terminal": "1D"
                                },
                                "destination": {
                                    "airport": "BOM",
                                    "terminal": "1"
                                },
                                "marketing_airline": "H1",
                                "operating_airline": "SG",
                                "flight_number": "9071",
                                "aircraft": "737",
                                "booking_info": {
                                    "travel_class": "ECONOMY",
                                    "booking_code": "L",
                                    "seats_remaining": "2"
                                }
                            }
                        ]
                    }
                }
            ],
            "fare": {
                "total_price": "185.45",
                "price_per_adult": {
                    "total_fare": "185.45",
                    "tax": "84.45"
                },
                "restrictions": {
                    "refundable": false,
                    "change_penalties": true
                }
            }
        }
    ]
}

`data.results` is an array (see the `[]` around it?). You can loop over arrays. — Taplar, Dec 20 '17 at 19:25
i know that i can loop over an array , but that's the problem , i don't think i am doing it perfectly , can you explain how can i ? — Gaurav Chauhan, Dec 20 '17 at 19:33
Related: https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript#3010848 — Taplar, Dec 20 '17 at 19:36

score 1 · Answer 1 · answered Dec 20 '17 at 20:07

Try using for():

function showdataforflights(data) {
    for(var i in data.results){
        //Here is the current Item
        var currentData = data[i];

        //And here you can acccess all of your properties
        var itineraries = currentData.itineraries;
        var fare = currentData.fare;
    }
};

This is a basic exemple of it, try looking at this related question

Junius L · Accepted Answer · 2017-12-20T21:34:44.100

Use $.each() to loop over the results array.

var json = '{ "currency": "USD", "results": [ { "itineraries": [ { "outbound": { "flights": [ { "departs_at": "2017-12-30T13:00", "arrives_at": "2017-12-30T15:10", "origin": { "airport": "DEL", "terminal": "3" }, "destination": { "airport": "BOM", "terminal": "2" }, "marketing_airline": "AI", "operating_airline": "AI", "flight_number": "863", "aircraft": "744", "booking_info": { "travel_class": "ECONOMY", "booking_code": "S", "seats_remaining": "2" } } ] } } ], "fare": { "total_price": "73.39", "price_per_adult": { "total_fare": "73.39", "tax": "8.39" }, "restrictions": { "refundable": true, "change_penalties": true } } }, { "itineraries": [ { "outbound": { "flights": [ { "departs_at": "2017-12-30T04:00", "arrives_at": "2017-12-30T06:15", "origin": { "airport": "DEL", "terminal": "3" }, "destination": { "airport": "BOM", "terminal": "2" }, "marketing_airline": "AI", "operating_airline": "AI", "flight_number": "349", "aircraft": "788", "booking_info": { "travel_class": "ECONOMY", "booking_code": "U", "seats_remaining": "9" } } ] } } ], "fare": { "total_price": "106.99", "price_per_adult": { "total_fare": "106.99", "tax": "9.99" }, "restrictions": { "refundable": true, "change_penalties": true } } }, { "itineraries": [ { "outbound": { "flights": [ { "departs_at": "2017-12-30T08:00", "arrives_at": "2017-12-30T10:10", "origin": { "airport": "DEL", "terminal": "3" }, "destination": { "airport": "BOM", "terminal": "2" }, "marketing_airline": "9W", "operating_airline": "9W", "flight_number": "336", "aircraft": "73H", "booking_info": { "travel_class": "ECONOMY", "booking_code": "H", "seats_remaining": "1" } } ] } } ], "fare": { "total_price": "116.35", "price_per_adult": { "total_fare": "116.35", "tax": "45.35" }, "restrictions": { "refundable": true, "change_penalties": true } } }, { "itineraries": [ { "outbound": { "flights": [ { "departs_at": "2017-12-30T06:00", "arrives_at": "2017-12-30T08:05", "origin": { "airport": "DEL", "terminal": "3" }, "destination": { "airport": "BOM", "terminal": "2" }, "marketing_airline": "UK", "operating_airline": "UK", "flight_number": "975", "aircraft": "320", "booking_info": { "travel_class": "PREMIUM_ECONOMY", "booking_code": "U", "seats_remaining": "9" } } ] } } ], "fare": { "total_price": "122.61", "price_per_adult": { "total_fare": "122.61", "tax": "19.61" }, "restrictions": { "refundable": true, "change_penalties": true } } }, { "itineraries": [ { "outbound": { "flights": [ { "departs_at": "2017-12-30T20:05", "arrives_at": "2017-12-30T22:05", "origin": { "airport": "DEL", "terminal": "1D" }, "destination": { "airport": "BOM", "terminal": "1" }, "marketing_airline": "H1", "operating_airline": "SG", "flight_number": "9071", "aircraft": "737", "booking_info": { "travel_class": "ECONOMY", "booking_code": "L", "seats_remaining": "2" } } ] } } ], "fare": { "total_price": "185.45", "price_per_adult": { "total_fare": "185.45", "tax": "84.45" }, "restrictions": { "refundable": false, "change_penalties": true } } } ] }';

    function flights(flights) {
        var td = '';
        $.each(flights, function (key, value) {
            td += '<td>' + value.departs_at + '</td><td>' + value.arrives_at + '</td><td>Airport: ' + value.origin.airport + ', Terminal: ' + value.origin.terminal + '</td><td>Airport: ' + value.destination.airport + ', Terminal: ' + value.destination.terminal + '</td><td>' + value.marketing_airline + '</td><td>' + value.operating_airline + '</td><td>' + value.flight_number + '</td><td>' + value.aircraft + '</td><td>' + value.booking_info.travel_class + '</td><td>' + value.booking_info.booking_code + '</td><td>' + value.booking_info.seats_remaining + '</td>';
        });
        return td;
    }

    var data = JSON.parse(json);
    var row = '';
    $.each(data.results, function (key, value) {
        var itineraries = value.itineraries;
        var fare = value.fare;
        var fare_td = '<td>' + fare.total_price + '</td><td>' + fare.price_per_adult.total_fare + '</td><td>' + fare.price_per_adult.tax + '</td><td>' + fare.restrictions.refundable + '</td><td>' + fare.restrictions.change_penalties + '</td></tr>';
        $.each(itineraries, function (itineraries_key, itineraries_value) {
            row += '<tr>' + flights(itineraries_value.outbound.flights) + fare_td + '</tr>';
        });
    });
    $('#flights').append(row);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="flights">
    <tr>
        <th>Departs at</th>
        <th>Arrives at</th>
        <th>Origin</th>
        <th>Destination</th>
        <th>Marketing Airline</th>
        <th>Operating Airline</th>
        <th>Flight number</th>
        <th>Aircraft</th>
        <th>Travel Class</th>
        <th>Booking code</th>
        <th>Seats remaining</th>
        <th>Total Price</th>
        <th>Price Per Adult</th>
        <th>Tax</th>
        <th>Refundable</th>
        <th>Change penalties</th>
    </tr>
</table>

How to format JSON data to show the result object in different div

2 Answers2