How To Read Arrays In API Using Ajax And Jquery - php

Question

I am creating a ticket reservation system. So , in this system I used API to request and get(response) data. But , when I got the response from API , it contains arrays of arrays.
{
"data": [
{
"type": "flight-offer",
"id": "1529553187230--523715719",
"offerItems": [
{
"services": [
{
"segments": [
{
"flightSegment": {
"departure": {
"iataCode": "CMB",
"at": "2018-07-02T03:15:00+05:30"
},
"arrival": {
"iataCode": "DOH",
"at": "2018-07-02T05:50:00+03:00"
},
"carrierCode": "BA",
"number": "6369",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "6369"
},
"duration": "0DT5H5M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "N",
"availability": 9,
"fareBasis": "NLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "DOH",
"at": "2018-07-02T06:35:00+03:00"
},
"arrival": {
"iataCode": "LHR",
"terminal": "4",
"at": "2018-07-02T12:00:00+01:00"
},
"carrierCode": "BA",
"number": "7007",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "7007"
},
"duration": "0DT7H25M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "N",
"availability": 9,
"fareBasis": "NLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "LHR",
"terminal": "2",
"at": "2018-07-02T14:15:00+01:00"
},
"arrival": {
"iataCode": "DUB",
"terminal": "2",
"at": "2018-07-02T15:40:00+01:00"
},
"carrierCode": "BA",
"number": "5965",
"aircraft": {
"code": "320"
},
"operating": {
"carrierCode": "EI",
"number": "5965"
},
"duration": "0DT1H25M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "N",
"availability": 9,
"fareBasis": "NLRCAS"
}
}
]
},
{
"segments": [
{
"flightSegment": {
"departure": {
"iataCode": "DUB",
"terminal": "2",
"at": "2018-07-20T18:00:00+01:00"
},
"arrival": {
"iataCode": "LHR",
"terminal": "2",
"at": "2018-07-20T19:20:00+01:00"
},
"carrierCode": "BA",
"number": "5978",
"aircraft": {
"code": "320"
},
"operating": {
"carrierCode": "EI",
"number": "5978"
},
"duration": "0DT1H20M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "LHR",
"terminal": "4",
"at": "2018-07-20T21:55:00+01:00"
},
"arrival": {
"iataCode": "DOH",
"at": "2018-07-21T06:40:00+03:00"
},
"carrierCode": "BA",
"number": "7014",
"aircraft": {
"code": "359"
},
"operating": {
"carrierCode": "QR",
"number": "7014"
},
"duration": "0DT6H45M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "DOH",
"at": "2018-07-21T07:35:00+03:00"
},
"arrival": {
"iataCode": "CMB",
"at": "2018-07-21T15:20:00+05:30"
},
"carrierCode": "BA",
"number": "6366",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "6366"
},
"duration": "0DT5H15M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
}
]
}
],
"price": {
"total": "837.46",
"totalTaxes": "464.46"
},
"pricePerAdult": {
"total": "837.46",
"totalTaxes": "464.46"
}
}
]
},
{
"type": "flight-offer",
"id": "1529553187230--1553108626",
"offerItems": [
{
"services": [
{
"segments": [
{
"flightSegment": {
"departure": {
"iataCode": "CMB",
"at": "2018-07-02T03:15:00+05:30"
},
"arrival": {
"iataCode": "DOH",
"at": "2018-07-02T05:50:00+03:00"
},
"carrierCode": "BA",
"number": "6369",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "6369"
},
"duration": "0DT5H5M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "N",
"availability": 9,
"fareBasis": "NLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "DOH",
"at": "2018-07-02T06:35:00+03:00"
},
"arrival": {
"iataCode": "LHR",
"terminal": "4",
"at": "2018-07-02T12:00:00+01:00"
},
"carrierCode": "BA",
"number": "7007",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "7007"
},
"duration": "0DT7H25M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "N",
"availability": 9,
"fareBasis": "NLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "LHR",
"terminal": "5",
"at": "2018-07-02T14:15:00+01:00"
},
"arrival": {
"iataCode": "DUB",
"terminal": "1",
"at": "2018-07-02T15:40:00+01:00"
},
"carrierCode": "BA",
"number": "830",
"aircraft": {
"code": "320"
},
"operating": {
"carrierCode": "BA",
"number": "830"
},
"duration": "0DT1H25M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "NLRCAS"
}
}
]
},
{
"segments": [
{
"flightSegment": {
"departure": {
"iataCode": "DUB",
"terminal": "1",
"at": "2018-07-20T16:30:00+01:00"
},
"arrival": {
"iataCode": "LHR",
"terminal": "5",
"at": "2018-07-20T18:00:00+01:00"
},
"carrierCode": "BA",
"number": "829",
"aircraft": {
"code": "321"
},
"operating": {
"carrierCode": "BA",
"number": "829"
},
"duration": "0DT1H30M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "LHR",
"terminal": "4",
"at": "2018-07-20T21:55:00+01:00"
},
"arrival": {
"iataCode": "DOH",
"at": "2018-07-21T06:40:00+03:00"
},
"carrierCode": "BA",
"number": "7014",
"aircraft": {
"code": "359"
},
"operating": {
"carrierCode": "QR",
"number": "7014"
},
"duration": "0DT6H45M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
},
{
"flightSegment": {
"departure": {
"iataCode": "DOH",
"at": "2018-07-21T07:35:00+03:00"
},
"arrival": {
"iataCode": "CMB",
"at": "2018-07-21T15:20:00+05:30"
},
"carrierCode": "BA",
"number": "6366",
"aircraft": {
"code": "77W"
},
"operating": {
"carrierCode": "QR",
"number": "6366"
},
"duration": "0DT5H15M"
},
"pricingDetailPerAdult": {
"travelClass": "ECONOMY",
"fareClass": "S",
"availability": 9,
"fareBasis": "SLRCAS"
}
}
]
}
],
"price": {
"total": "837.46",
"totalTaxes": "464.46"
},
"pricePerAdult": {
"total": "837.46",
"totalTaxes": "464.46"
}
}
]
}
Now I want to read and display these values in the view page. I mean I want to get and display type and id number. Then I tried below steps with laravel. I got all the details with
Console.log(data);.
But, couldn't get any thing into the view page. How can I get values to the view page ??
View page.
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
{{ csrf_field() }}
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Origin City : <input type="text" class="form-control" name="origin" value="" id="origin"> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Destination City : <input type="text" class="form-control" name="destination" value=""
id="destination"> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Adults : <select name="st" class="form-control" id="adults">
#for ($i = 1; $i <= 9; $i++)
<option value="{{ $i }}">{{ $i }}</option>
#endfor
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Departure Date :<input class="form-control" type="text" name="departureDate" id="departureDate">
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Return Date :<input class="form-control" type="text" name="returnDate" id="returnDate">
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Access Token : <input type="text" class="form-control" name="bat" value="" id="bat"> <br>
</div>
Pull User Data
<p id="errorModal"></p> <br>
<div id="ghapidata" class="clearfix"></div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#ghsubmitbtn').on('click', function(e){
var origin = $('#origin').val();
var destination = $('#destination').val();
var departureDate = $('#departureDate').val();
var returnDate = $('#returnDate').val();
var adults = $('#adults').val();
var bat = $('#bat').val();
var requri = 'https://test.api.amadeus.com/v1/shopping/flight-offers?origin=' + origin + '&destination=' + destination + '&departureDate=' + departureDate + '&returnDate=' + returnDate + '&adults=' + adults;
var repouri = 'https://test.api.amadeus.com/v1/shopping/flight-offers?origin=' + origin + '&destination=' + destination + '&departureDate=' + departureDate + '&returnDate=' + returnDate + '&adults=' + adults;
$.ajax({
url: 'https://test.api.amadeus.com/v1/shopping/flight-offers?origin=' + origin + '&destination=' + destination + '&departureDate=' + departureDate + '&returnDate=' + returnDate + '&adults=' + adults,
method: 'GET',
headers: {"Authorization": 'Bearer ' + bat},
success: function (data) {
console.log(data);
requestJSON(requri, function(JSON) {
// else we have a user and we display their info
var data = JSON.data;
var type = JSON.type;
var id = JSON.id;
var iataCode = JSON.iataCode;
var outhtml = '<h2>'+data+' <span class="smallname">(#'+type+')</span></h2>';
outhtml = outhtml + '<p>User Type: '+type+'</p></div>';
outhtml = outhtml + '<p>Id: '+id+' - IATA Code: '+iataCode+'<br></p></div>';
outhtml = outhtml + '<div class="repolist clearfix">';
var repositories;
$.getJSON(repouri, function(JSON){
repositories = JSON;
outputPageContent();
});
function outputPageContent() {
outhtml = outhtml + '<p><strong>Repos List:</strong></p> <ul>';
$.each(repositories, function(index) {
outhtml = outhtml + '<li>repositories[index].data.type</li>';
});
outhtml = outhtml + '</ul></div>';
$('#ghapidata').html(outhtml);
} // end outputPageContent()
}); // end requestJSON Ajax call
},
error: function (jQXHR) {
// If status code is 401, access token expired, so
// redirect the user to the login page
if (jQXHR.status == "401") {
$('#errorModal').modal('show');
}
else {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
}
});
});
function requestJSON(url, callback) {
$.ajax({
url: url,
complete: function(xhr) {
callback.call(null, xhr.responseJSON);
}
});
}
});
</script>

Answer 1

Need to parse the response as JSON, then handle it from there:
JSON.parse(data)
$.getJSON(repouri, function(data){
repositories = JSON.parse(data);
data = repositories.data;
type = data.type;
id = data.id;
services = data.offerItems.services; // Referencing the sub objects within
outputPageContent();
});
See here:
http://jsfiddle.net/rhn9cweg/19/
gotta address the sections, can put it into a looping function to handle it a bit cleaner, but you need to parse the data to the function .
---- EDIT ----
to loop through each of the fields:
$.each(repositories, function (key, data) {
console.log(key);
$.each(data, function (index, data) {
console.log('index', data);
});
});
put that to a function and the call it on it self for using an if block to see if the item is an object. (call the function from within the function for a recurring check)

Answer 2

The field type, id are inside data in json array format so you can't read that directly using JSON.type or JSON.id
var data = JSON.data;
var type = data[0].type;
var id = data[0].id;
var iataCode = data[0].iataCode;
Please check browser console for error messages to debug your code