Call API with XHR
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://<my_api_key>.mockapi.io/users', true);
xhr.responseType = 'text';
/* Diagnostics */
// xhr.onreadystatechange = function() {
// console.log(xhr.readyState);
// console.log(xhr.status);
// console.log(xhr.statusText);
// };
xhr.onload = function() { // Callback.
if (xhr.status === 200) {
var myStuff = JSON.parse(xhr.response);
console.log(myStuff);
}
};
xhr.send(); // Activates open().
/*jslint browser:true */
/* None of the URLs have protocol in front, but rather start with "//".
* This way they allow for both unsecure and secure communication, depending
* on the server the app is deployed to.
*/
'use strict';
var weatherConditions = new XMLHttpRequest();
var weatherForecast = new XMLHttpRequest();
var cObj;
var fObj;
// GET THE CONDITIONS
weatherConditions.open('GET', '//api.openweathermap.org/data/2.5/weather?zip=10020,hr&units=metric&APPID=<my_api_key>', true);
weatherConditions.responseType = 'text';
weatherConditions.send(null);
weatherConditions.onload = function() {
if (weatherConditions.status === 200){
cObj = JSON.parse(weatherConditions.responseText);
console.log(cObj);
document.getElementById('location').innerHTML = cObj.name;
document.getElementById('weather').innerHTML = cObj.weather[0].main;
document.getElementById('temperature').innerHTML = cObj.main.temp + " °C";
document.getElementById('desc').innerHTML = "Wind speed " + cObj.wind.speed;
} //end if
}; //end function
// GET THE FORECARST
weatherForecast.open('GET', '//api.openweathermap.org/data/2.5/forecast?zip=10020,hr&units=metric&APPID=<my_api_key>', true);
weatherForecast.responseType = 'text';
weatherForecast.send();
weatherForecast.onload = function() {
if (weatherForecast.status === 200){
fObj = JSON.parse(weatherForecast.responseText);
console.log(fObj);
var date_raw = fObj.list[0].dt_txt.substring(5, 11);
var weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[0].weather[0].icon + '.png';
document.getElementById('r1c1').innerHTML = date_raw;
document.getElementById('r1c2').src = weatherIconUrl;
document.getElementById('r1c3').innerHTML = fObj.list[0].main.temp_min + ' °C';
document.getElementById('r1c4').innerHTML = fObj.list[0].main.temp_max + '°C';
date_raw = fObj.list[1].dt_txt.substring(5, 11);
weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[1].weather[0].icon + '.png';
document.getElementById('r2c1').innerHTML = date_raw;
document.getElementById('r2c2').src = weatherIconUrl;
document.getElementById('r2c3').innerHTML = fObj.list[1].main.temp_min + ' °C';
document.getElementById('r2c4').innerHTML = fObj.list[1].main.temp_max + '°C';
date_raw = fObj.list[2].dt_txt.substring(5, 11);
weatherIconUrl = '//openweathermap.org/img/w/' + fObj.list[1].weather[0].icon + '.png';
document.getElementById('r3c1').innerHTML = date_raw;
document.getElementById('r3c2').src = weatherIconUrl;
document.getElementById('r3c3').innerHTML = fObj.list[2].main.temp_min + ' °C';
document.getElementById('r3c4').innerHTML = fObj.list[2].main.temp_max + '°C';
} //end if
}; //end function
let request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status) {
console.log(this.responseText);
}
}
request.open('GET', 'https://<my_api_key>.mockapi.io/users', true);
request.send();