I cannot display this API data

I have been stuck with this for over 2 days. please help.

I can view the API data using console.log(data.data) but can’t seem to be able to display it on my html nor loop through it.



fetch("https://travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com/v1/prices/monthly?origin=LHR&destination=DXB&currency=GBP", {
	"method": "GET",
	"headers": {
		"x-access-token": "72891577707fcf74feb69ed1072907cd",
		"x-rapidapi-key": "29c6caa1fcmsh4dd0870566ba44bp141221jsnc1675a6c04bb",
		"x-rapidapi-host": "travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com"
	}
		

})
.then(response => response.json())
.then(data =>{
	console.log(data.data);

	let html = "";
	if(data){
		[data].forEach(data =>{
			html +=`
			
		<div class="item">
			<img src="" alt="">
			<div class="flex-container">
		  	<h1 class="title">${data.data["2021-06"].origin}</h1>
		  	<a class="view-btn" href="#">Read More</a>
			</div>
			<p class="item-data">${null}</p>
	  </div>
			
			`;

			searchResultDiv.innerHTML = html;
		})
	}
})

.catch(err => {
	console.error(err);
});

[off-topic]
Hi there. When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

You are working with an object, with a bunch of properties, whose values are objects:

{
  "2021-06": { origin: "LON", destination: "DXB", price: 270, … },
  "2021-07": { origin: "LON", destination: "DXB", price: 264, … },
  ...
}

This means you can use a reduce statement to iterate over each of the object’s properties, then construct a string of HTML which you can insert into your page.

Here’s a simple demo:

function displayResults(data) {
  const html = Object.keys(data).reduce((acc, key) => {
    acc += `<li>
      <h2>${data[key].origin} to ${data[key].destination}</h2>
      <p>Departure: ${data[key].departure_at}</p>
      <p>Price: ${data[key].price}</p>
    </li>`;

    return acc;
  }, '');

  document.body.innerHTML = `<ul>${html}</ul>`;
}

fetch(
  // eslint-disable-next-line max-len
  'https://travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com/v1/prices/monthly?origin=LHR&destination=DXB&currency=GBP',
  {
    method: 'GET',
    headers: {
      'x-access-token': '72891577707fcf74feb69ed1072907cd',
      'x-rapidapi-key': '29c6caa1fcmsh4dd0870566ba44bp141221jsnc1675a6c04bb',
      'x-rapidapi-host': 'travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com',
    },
  }
)
  .then((response) => response.json())
  .then((result) => {
    displayResults(result.data);
  })
  .catch((err) => {
    console.error(err);
  });

HTH

2 Likes

Hi James,

Thank you so much.

You are a life saver!

does it work in jquery too?

Does what work in jQuery?

Hi, I mean does that way also work when using ajax jquery?

but it’s okay I’ve also managed to use the fetch method like yours. but I’m still confused about how to display the full city name instead of just displaying the iata code.

then how to display the name of the city if by adding an autocomplete like this

https://suggest.travelpayouts.com/uaca/v1/search_terms_forward?&locale=en&service=aviasales_airports&term=Lax

so that it can display the name of the city.

is it possible?

Well, jQuery is just JavaScript, so the question as to whether it works using jQuery is “yes”.

If you post the code you have so far and highlight the bit you are having trouble with, I don’t mind taking a look.

I don’t have the code either.

as you know the travelpayouts API only displays the iata codes from each city and cannot display the city name data.

is it possible to use the data from the autocomplete by entering it or combining it with the script code that you have created.

sorry I forgot I’ve tried before, like this is my code. but my code has a different endpoint.

const settings = {
	"async": true,
	"crossDomain": true,
	"url": "https://travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com/v2/prices/latest?destination=SUB&origin=&period_type=year&one_way=%20false&show_to_affiliates=true&trip_class=0&currency=USD&page=1&sorting=price&limit=8",
	"method": "GET",
	"headers": {
		"x-access-token": "e3f5d349ea54ab0af9049686d7c1520e",
		"x-rapidapi-key": "7553c9c4b0msh01b4944e1049a81p158876jsn340bfdd90264",
		"x-rapidapi-host": "travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com"
	}
};
const matrix = {
	"async": true,
	"crossDomain": true,
	"url": "https://travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com/v2/prices/latest?destination=SUB&origin=&period_type=year&one_way=%20false&show_to_affiliates=true&trip_class=0&currency=USD&page=1&sorting=price&limit=8",
	"method": "GET",
	"headers": {
		"x-access-token": "e3f5d349ea54ab0af9049686d7c1520e",
		"x-rapidapi-key": "7553c9c4b0msh01b4944e1049a81p158876jsn340bfdd90264",
		"x-rapidapi-host": "travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com"
	}
};

function origin(data) {
	asal = data[0].name;
	console.log(asal);
	$.ajax(matrix).done(function(datax) {
		for (var i = 0; i < datax.data.length; i++) {
			ori = datax.data[i].origin;
			document.getElementById('flight').innerHTML = asal;
			var rcp = document.createElement("script");
			auto_url = "https://autocomplete.travelpayouts.com";
			rcp.src = auto_url + "/places2?term=" + ori + "&locale=en_us&types=city%2Cairport&max=1&callback=origin", document.getElementsByTagName("head")[0].appendChild(rcp);
		}
	});
}
$.ajax(settings).done(function(response) {
	var blockbody = '<div class="row no-gutters">';
	for (var i = 0; i < response.data.length; i++) {
		var origin = response.data[i].origin;
		var destination = response.data[i].destination;
		var depart_date = response.data[i].depart_date;
		var return_date = response.data[i].return_date;
		var price = response.data[i].value;
		var found_at = response.data[i].found_at;
		blockbody += "<div class='col-md-6 col-lg-3 ftco-animate fadeInUp ftco-animated'><a href='#' class='block-5' style='background-image:url(https://photo.hotellook.com/static/cities/356x400/" + origin + ".webp)'><div class='text'><span class='price'>$" + price + "</span><h3 class='heading'>Group Tour in " + destination + "</h3><div class='post-meta'><span>" + origin + ", Maldives</span></div><p class='star-rate'><span>Depart: " + depart_date + "</span></p><p class='star-rate'><span>Return: " + return_date + "</span></p></div></a></div>";
	}
	blockbody += '</div>';
	document.getElementById('flights').innerHTML = blockbody;
});

or this one too

const matrix = {
	"async": true,
	"crossDomain": true,
	"url": "https://travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com/v2/prices/latest?destination=SUB&origin=&period_type=year&one_way=%20false&show_to_affiliates=true&trip_class=0&currency=USD&page=1&sorting=price&limit=8",
	"method": "GET",
	"headers": {
		"x-access-token": "e3f5d349ea54ab0af9049686d7c1520e",
		"x-rapidapi-key": "7553c9c4b0msh01b4944e1049a81p158876jsn340bfdd90264",
		"x-rapidapi-host": "travelpayouts-travelpayouts-flight-data-v1.p.rapidapi.com"
	}
};

$.ajax(matrix).done(function(datax) {
    for (var i = 0; i < datax.data.length; i++) {
        var origin = datax.data[i].origin;
        $.ajax({
            url: "https://autocomplete.travelpayouts.com/places2?term=" + origin + "&locale=en_us&types=city%2Cairport&max=1",
            type: 'get',
            dataType: "jsonp",
            success: function(data) {
                for (var i = 0; i < data.length; i++) {
                    asal = data[i].name;
                    console.log(asal);
                    $.ajax(settings).done(function(response) {
                        var blockbody = '<div class="row no-gutters">';
                        for (var i = 0; i < response.data.length; i++) {
                            var origin = response.data[i].origin;
                            blockbody += "<span>" + asal + ",</span>";
                        }
                        blockbody += '</div>';
                        document.getElementById('flights').innerHTML = blockbody;
                    });
                }
            }
        });
    }
});