API

API


Getting Started

A big part of working with JavaScript is knowing how to connect to APIs. You may have been told at some point to just "play around with some APIs!" to learn what they are and how to work with them. If you've ever taken a look at the documentation for an API and had no idea where to start or what to do and gotten frustrated. We're going to make a very simple web app with plain JavaScript that will retrieve information from an API and display it on the page. There will be no server, dependencies, build tools, or anything else to further muddy the waters on an already difficult and confusing topic for beginners.


Code

url: "leveluppsite.com/trip/api/products/search?filter_by[]=Best&sort=start_date"

How to use
$(document).ready(function(){
$.ajax({
url: "/trip/api/products/search?filter_by[]=Promo&sort=start_date",
success: function(result) {
var menuItems = result.data.matches;
var menuString = '';
for (var i = 0; i < menuItems.length; i++) {
var categories = menuItems[i].categories.split("|");
var categories_string = '';
var tour_dates_string = '';
categories_string = categories.join(" ");
var priceList = menuItems[i].price_list;
var from = '';
if (priceList != null) {
from = 'From ';
}
var stars = "";
for( var j=0; j<menuItems[i].custom_data.accommodation; j++){
stars += '<i class="fa fa-star"></i>';
}
if (menuItems[i].fixed_date_tour_dates) {
var tour_dates = {};
var this_year = moment().format('YY');
for (var tdi = 0; tdi < menuItems[i].fixed_date_tour_dates.length; tdi++) {
var trip_date = menuItems[i].fixed_date_tour_dates[tdi].value.split('-');
if (trip_date.length > 1) {
var trip_start_date = moment(trip_date[0], "DD MMM YY");
var trip_end_date = moment(trip_date[1], "DD MMM YY");
if (trip_start_date.format('YY') == this_year) {
if (!tour_dates[trip_start_date.format('MMM')]) {
tour_dates[trip_start_date.format('MMM')] = [];
}
tour_dates[trip_start_date.format('MMM')].push(trip_start_date.format('D') +'-'+(trip_start_date.format('MMM') == trip_end_date.format('MMM') ? trip_end_date.format('D') : trip_end_date.format('D(MMM)')) );
}
else {
if (!tour_dates[trip_start_date.format('MMM YYYY')]) {
tour_dates[trip_start_date.format('MMM YYYY')] = [];
}
tour_dates[trip_start_date.format('MMM YYYY')].push(trip_start_date.format('D') +'-'+(trip_start_date.format('MMM') == trip_end_date.format('MMM') ? trip_end_date.format('D') : trip_end_date.format('D(MMM)')) );
}
}
}
console.log(tour_dates);
if (tour_dates) {
for (mon in tour_dates) {
console.log(mon);
if (Object.prototype.hasOwnProperty.call(tour_dates, mon)) {
tour_dates_string += '<div class="p-2 tour-dates"><span class="badge badge-tour-date p-2">'+mon+'</span>';
for (var tdi= 0; tdi < tour_dates[mon].length; tdi++) {
tour_dates_string += '<span class="p-2 days">'+tour_dates[mon][tdi]+'</span>';
if (tdi > 0) {
tour_dates_string += '<span class="pr-2 py-2">/</span>';
}}
tour_dates_string += '</div>';
}}}
console.log(tour_dates_string);
}
var compare = "";
var discounted = "";
if(menuItems[i].custom_data.compareAtPrice>0){
compare = '<br><span class="usualprice">$<span style="text-decoration: line-through;">' + menuItems[i].custom_data.compareAtPrice + '</span>';
discounted = "discounted";
}
var airline = "";
var code = "";
if(menuItems[i].custom_data.airline!=undefined){
airline = menuItems[i].custom_data.airline;
}
if(menuItems[i].custom_data.code!=undefined){
code = menuItems[i].custom_data.code;
}
menuString += '<div class="item"><div class="box_grid"><figure> <div class="overlay-info-wrapper"> <div class="tour-price-tag price-wrapper"> <div class="price"> <div class="price-amount"> <div class="start-at">From</div> <div class="price-value"><span class="'+discounted+'">&nbsp;$' + menuItems[i].price + '</span>'+compare+'</span></div> </div> </div> </div> </div><a href="/tour/' + menuItems[i].slug + '" target="_blank"><img src="' + menuItems[i].image + '" class="img-fluid" alt="" width="800" height="533" data-mce-src="' + menuItems[i].image + '"></a><div class="read_more"><span><a href="/tour/' + menuItems[i].slug + '" target="_blank">Read more</a></span></div><small>' + categories_string + '</small></figure><div class="wrapper"><h3><a href="/tour/' + menuItems[i].slug + '" data-mce-href="/tour/' + menuItems[i].slug + '" target="_blank">' + menuItems[i].name + '</a></h3><div class="meta-wrapper"><div class="meta-col stay-day-night"><span class="title">Duration</span><strong>' + menuItems[i].custom_data.days + '</strong></div><div class="meta-col airline"><span class="title">Transport</span>' + airline + '</div><div class="meta-col start-hotel"><span class="title">Stay</span><strong>' + stars + '</strong></div><div class="meta-col tour-code"><span class="title">Tour Code</span><strong>' + code + '</strong></div></div>'+tour_dates_string+'</div></div></div>';
}
$('#promotions').html(menuString);
$('#promotions').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 0,
responsive: {
0: {
items: 1
},
767: {
items: 2
},
1000: {
items: 3
},
1400: {
items: 4
}}});
}});