I'm trying to retrieve data using the openweathermap API. I can get it to work, but I can't seem to do it asynchronously. This causes the following error:
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
Form:
<label>Zipcode: </label>
<form>
<input type="text" id="locationField" name="locationField">
<input type="submit" id="weatherSubmit" value="Get Weather">
</form>
<div>
<br>
<label>Location:</label>
<div id="location"></div>
<br>
<label>Temperature:</label>
<div id="temperature"></div>
<br>
<label>Humidity</label>
<div id="humidity"></div>
</div>
Script:
document.getElementById('weatherSubmit').addEventListener('click', function(event) {
var zipcode = document.getElementById('locationField').value;
var req = new XMLHttpRequest();
var payload = {location: null, temperature:null, humidity:null};
req.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=" + zipcode + ",us&appid=fa7d80c48643dfadde2cced1b1be6ca1", true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load',function(){
if(req.status >= 200 && req.status < 400){
var response = JSON.parse(req.responseText);
document.getElementById('location').textContent = response.name;
document.getElementById('temperature').textContent = response.main.temp;
document.getElementById('humidity').textContent = response.main.humidity;
} else {
console.log("Error in network request: " + request.statusText);
}});
req.send(JSON.stringify(payload));
event.preventDefault();
});
I can get this to work if I don't use AJAX, but that's not the way I want to do it. The following code works if foo() is called onclick from the submit button and passes in the zip code value.
function foo(value) {
var req = new XMLHttpRequest();
req.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=" + value + ",us&appid=fa7d80c48643dfadde2cced1b1be6ca1", false);
req.send(null);
var response = JSON.parse(req.responseText);
document.getElementById('location').textContent = response.name;
var f = ((response.main.temp - 273.15) * 9 / 5) + 32;
document.getElementById('temperature').textContent = f + "f";
document.getElementById('humidity').textContent = response.main.humidity + "%";
}
Get rid of the setRequestHeader
var req = new XMLHttpRequest();
var payload = {location: null, temperature:null, humidity:null};
req.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=02143,us&appid=fa7d80c48643dfadde2cced1b1be6ca1", true);
//req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load',function(){
if(req.status >= 200 && req.status < 400){
var response = JSON.parse(req.responseText);
console.log(response);
//document.getElementById('location').textContent = response.name;
//document.getElementById('temperature').textContent = response.main.temp;
//document.getElementById('humidity').textContent = response.main.humidity;
} else {
console.log("Error in network request: " + request.statusText);
}});
req.send(null);
Works great!
BTW. Change your API key :(
It's a problem with CORS. The workaround is to use JSONP. It seems to be supported by OpenWeatherMap's API.
function foo(value) {
window.weatherCallback = function(response) {
document.getElementById('location').textContent = response.name;
var f = ((response.main.temp - 273.15) * 9 / 5) + 32;
document.getElementById('temperature').textContent = f + "f";
document.getElementById('humidity').textContent = response.main.humidity
delete window.weatherCallback; // delete the property
};
var script = document.createElement('script');
script.src = '//api.openweathermap.org/data/2.5/weather?q=" + value + ",us&appid=fa7d80c48643dfadde2cced1b1be6ca1&callback=weatherCallback';
document.head.appendChild(script);
}
Can't test it though, as I don't have the key for API.
Related
I'm trying to make a ajax post request to django this is js snippet
const xhr = new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('POST', '');
var data = '{% csrf_token %}';
console.log(data);
console.log(typeof(data));
xhr.setRequestHeader('X-CSRF-Token', data);
xhr.onload = function(){
console.log(xhr.readyState);
console.log(xhr.status);
if(xhr.status == 200){
console.log(JSON.parse(xhr.responseText));
}else{
console.log("Something went wrong!!");
}
}
xhr.send({'userId' : userId})
}
This is my error log:
I've been getting a 403 forbidden error can anybody help me out?
This function should get you the csrf-token
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
then:
const csrftoken = getCookie('csrftoken');
to get the csrf-token.
What also might be worth looking at is changing X-CSRF-Token
xhr.setRequestHeader('X-CSRF-Token', data);
to X-CSRFToken
xhr.setRequestHeader('X-CSRFToken', data);
hope this helps
The {% csrf_token %} in the templates page translates to:
<input type="hidden" name="csrfmiddlewaretoken" value="WRWu3DwbdHDl1keRwSqUNrvcwZXqhCzkInEGVftyuwWG0v5kBBzeGrZ34wKpjFB5">
We need to get the CSRF token , i.e., the value of this element:
x = document.getElementsByName("csrfmiddlewaretoken")[0].value;
Then, we need to pass this value to the setRequestHeader method of the JSON request, with "X-CSRFToken" as the first argument:
function requestJSON() {
x = document.getElementsByName("csrfmiddlewaretoken")[0].value;
jsonRequest = new XMLHttpRequest();
jsonRequest.overrideMimeType("application/json");
jsonRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 ) {
var j = JSON.parse(this.responseText);
// do whatever with the JSON data
}
else {console.log(this.status);}
};
jsonRequest.open("POST","url/");
jsonRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");
jsonRequest.setRequestHeader("X-CSRFToken",x);
jsonRequest.send();
}
I have a function that calls an API (let's call it API-1) to get the song lyrics.
Since this API sometimes can't find a song in its database, I want to call another API (let's call it API-2) to do the same search.
I need to integrate the code of both APIs inside the function, when the first one doesn't get data.
I tell you some very important information:
In API-1 I must force the data to be fetched as XML and the responseType must be 'document'.
API-2 does not require any of the above conditions, the data is parced as JSON and the responseType it supports is 'text', but does not require it to be set, with 'document' it DOES NOT work, it gives error.
Now I will share the function code for API-1 and then I will share the same function code for API-2.
They both work perfect if I test them independently.
The help I am asking for is to integrate API-2 when API-1 does not fetch data.
Code using API-1
this.refreshLyric = function (currentSong, currentArtist) {
var xhr = new XMLHttpRequest;
xhr.open('GET', proxy_URL + api_URL + 'apiv1.asmx/SearchLyricDirect?artist=' + currentArtistE + '&song=' + ucwords(currentSongE), true);
// ONLY FOR THIS XMLHttpRequest responseType must be empty string or 'document'
xhr.responseType = 'document';
// ONLY FOR THIS XMLHttpRequest force the response to be parsed as XML
xhr.overrideMimeType('text/xml');
xhr.onload = function () {
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
var openLyric = document.getElementsByClassName('lyrics')[0];
var lyric = xhr.responseXML.getElementsByTagName('Lyric')[0].innerHTML;
//check if any data was obtained
if (lyric != '') {
document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
openLyric.style.opacity = "1";
openLyric.setAttribute('data-toggle', 'modal');
} else { /////// HERE INTEGRATE API-2 //////
openLyric.style.opacity = "0.3";
openLyric.removeAttribute('data-toggle');
var modalLyric = document.getElementById('modalLyrics');
modalLyric.style.display = "none";
modalLyric.setAttribute('aria-hidden', 'true');
(document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
}
} else {
document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
}
};
xhr.send();
}
The same code using API-2
this.refreshLyric = function (currentSong, currentArtist) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var data = JSON.parse(this.responseText);
var openLyric = document.getElementsByClassName('lyrics')[0];
var lyric = data.mus[0].text;
//check if any data was obtained
if (lyric != '') {
document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
openLyric.style.opacity = "1";
openLyric.setAttribute('data-toggle', 'modal');
} else {
openLyric.style.opacity = "0.3";
openLyric.removeAttribute('data-toggle');
var modalLyric = document.getElementById('modalLyrics');
modalLyric.style.display = "none";
modalLyric.setAttribute('aria-hidden', 'true');
(document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
}
} else {
document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
}
}
xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
xhttp.send()
}
The shared codes are of the SAME function (this.refreshLyric), what has to be integrated is only the XMLHttpRequest API.
In the ELSE of line 23 of API-1 I must integrate the code of API-2.
I have already tried it in several ways but I am presented with syntax problems with the IF - ELSE conditionals and errors with the API-2 which is getting the responseType and the MimeType of API-1.
EDIT
FIXED: When API-1 cannot find the lyric, I have created a new function that calls API-2. refreshLyric2(currentSong, currentArtist); :)
this.refreshLyric = function (currentSong, currentArtist) {
var xhr = new XMLHttpRequest;
xhr.open('GET', proxy_URL + api_URL + 'apiv1.asmx/SearchLyricDirect?artist=' + currentArtistE + '&song=' + ucwords(currentSongE), true);
// ONLY FOR THIS XMLHttpRequest responseType must be empty string or 'document'
xhr.responseType = 'document';
// ONLY FOR THIS XMLHttpRequest force the response to be parsed as XML
xhr.overrideMimeType('text/xml');
xhr.onload = function () {
if (xhr.readyState === xhr.DONE && xhr.status === 200) {
var openLyric = document.getElementsByClassName('lyrics')[0];
var lyric = xhr.responseXML.getElementsByTagName('Lyric')[0].innerHTML;
//check if any data was obtained
if (lyric != '') {
document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
openLyric.style.opacity = "1";
openLyric.setAttribute('data-toggle', 'modal');
} else {
//If lyric was not obtained, we call API-2
refreshLyric2(currentSong, currentArtist);
}
} else {
document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
}
};
xhr.send();
}
refreshLyric2 = function (currentSong, currentArtist) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var data = JSON.parse(this.responseText);
var openLyric = document.getElementsByClassName('lyrics')[0];
var lyric = data.mus[0].text;
//check if any data was obtained
if (lyric != '') {
document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
openLyric.style.opacity = "1";
openLyric.setAttribute('data-toggle', 'modal');
} else {
openLyric.style.opacity = "0.3";
openLyric.removeAttribute('data-toggle');
var modalLyric = document.getElementById('modalLyrics');
modalLyric.style.display = "none";
modalLyric.setAttribute('aria-hidden', 'true');
(document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
}
} else {
document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
}
}
xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
xhttp.send()
}
I have a form where user types in the city name, I want to make an API call and get weather results in that city and then display it in the console.
I'm getting an error because for some reason the variable that holds input.value is not being concatenated into the string.
Here's the code:
var request;
var input1 = document.getElementById('city');
var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
var apikey = '&APPID=433b12b793d7ebc17989745c069a540b';
var sum = api + input1.value + apikey;
function myFunction() {
request = new XMLHttpRequest();
request.open('GET', sum, true);
request.onload = function() {
var data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
console.log(data);
} else {
console.log(input1.value);
}
}
request.send();
}
myFunction(input1.value);
<input id='city' value='San Francisco'>
Thanks for any help!
Your code is ok, you just need to put everything inside the function.
<script>
function myFunction() {
var request;
var input1 = document.getElementById('city');
var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
var apikey =
'&APPID=433b12b793d7ebc17989745c069a540b';
var sum = api + input1.value + apikey;
request = new XMLHttpRequest();
request.open('GET', sum, true);
request.onload = function () {
var data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
console.log(data);
} else {
console.log(input1.value);
}
}
request.send();
}
</script>
Not sure what I am doing wrong here.
HTML
<form id="inp" onsubmit="process()">
<input id="link" type="text" name="link" placeholder="Enter your link">
<input id="submit" type="submit" name="submit" value="→">
</form>
JavaScript
function createRequest() {
let result = null;
if (window.XMLHttpRequest) {
result = new XMLHttpRequest();
result.overrideMimeType('application/json');
}
else {
window.alert("Abort!");
}
return result;
}
let c=0;
function process() {
let l = document.getElementById("inp").link.value;
let resp;
let req = createRequest();
let payload = {
link: l,
ignoreException: true
};
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/json");
req.send(payload);
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
resp = req.responseText;
console.log("response text - " + resp);
}
console.log(req.readyState + " " + req.status + " " + c);
};
}
I want it to log the readyState and status for every state change and also log the response text for the final state.
It logs " 4 0 1 " which means it's changing the state just once and is changing it straight to the final state.
It should change the states as .open(), .setRequestHeader(), and .send() functions are executed.
How can I make this work?
Note- "url" parameter is the api url.
If you want the onreadystatechange event to be called for .open() and .setRequestHeader() you will need to register the onreadystatechange event handler before you call the open() and setRequestHeader() functions.
So if you move the onreadystatechange definition up a few lines, it should be good.
So something like this:
function process() {
let l = document.getElementById("inp").link.value;
let resp;
let req = createRequest();
let payload = {
link: l,
ignoreException: true
};
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
resp = req.responseText;
console.log("response text - " + resp);
}
console.log(req.readyState + " " + req.status + " " + c);
};
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/json");
req.send(payload);
}
I've been struggling with this and have had no luck. I've included the error and most of the context around the block in question.
var successURL = 'https://www.facebook.com/connect/login_success.html';
var userFirstName = ''
var userEmail = ''
function onFacebookLogin(){
if (localStorage.getItem('accessToken')) {
chrome.tabs.query({}, function(tabs) {
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].url.indexOf(successURL) !== -1) {
var params = tabs[i].url.split('#')[1];
var accessToken = params.split('&')[0];
accessToken = accessToken.split('=')[1];
localStorage.setItem('accessToken', accessToken);
chrome.tabs.remove(tabs[i].id);
console.log(accessToken);
pullSecurityToken();
findFacebookName();
}
}
});
}
}
chrome.tabs.onUpdated.addListener(onFacebookLogin);
function pullSecurityToken(){
var pointUrl = "localhost:3000/api/v1/retrieve_token_for/" + localStorage.accessToken + "/" + localStorage.securityToken;
var xhr = new XMLHttpRequest();
xhr.open("GET", pointUrl, true);
alert(JSON.parse(xhr.responseText));
}
var response = ''
function findFacebookName(){
if (localStorage.accessToken) {
var graphUrl = "https://graph.facebook.com/me?access_token=" + localStorage.accessToken;
console.log(graphUrl);
var xhr = new XMLHttpRequest();
xhr.open("GET", graphUrl, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if(xhr.status == '401'){
alert("Security Token Invalid, please check and try again.");
}
response = JSON.parse(xhr.responseText);
userFirstName = response.first_name
userEmail = response.email
console.log(response);
}
}
}
xhr.send();
}
Here's the error:
Error in response to tabs.query: SyntaxError: Unexpected end of input
at onFacebookLogin (chrome-extension://dapeikoncjikfbmjnpfhemaifpmmgibg/background.js:7:17)
Even if you use a synchronous request, you still need to send it. So add an xhr.send(); after the xhr.open inside pullSecurityToken.
As Felix Kling points out in the comments, the lack of send will directly cause your error, because the responseText property is still an empty string and such a string is not valid JSON whereas "" would be valid JSON.