I'm building a search for image program using flickr API and im stucked at a certain error.
"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
async function (async)
getData # index.js:19"
I can't get any data from the API. Can someone please explain why I get this error and how to fix it?
Here is JavaScript code
const api_key = "123456789ABCDEFGH";
let quantity = "5";
const userSearch = document.getElementById("search-field"); // input search
async function getData() {
const URL = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${api_key}&per_page=${quantity}&tags=${encodeURIComponent(
userSearch.value
)}`;
let response = await fetch(URL, { method: "GET" });
let data = await response.json();
return await data; // HERE is data error.
Add format=json param to your url. By default this endpoint returns results in xml format
Does nnot work, I had it before and removed just to try if it worked better without. Now when i added again, same problem..
If you mean like this:
const URL = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${api_key}&per_page=${quantity}&tags=${encodeURIComponent(
userSearch.value
)}&format=json`;
I solved it and will explain here if someone else need's it.
Also add this: &nojsoncallback=1`
const URL = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${api_key}&per_page=${quantity}&tags=${encodeURIComponent(
userSearch.value
)}&format=json&nojsoncallback=1`;
Related
I have a a file name that comes from a file uploaded by the user
const fileName = "foo.doc"
I then went to pass that to an api that saves this to storage.
const mydata = await myApiToSaveFile(fileName);
// if the server throws an error even after my sanitization, I want to just pass in a UUID, which I know will pass. I don't care about the specific error, just that an error occurs, so is it wrong to use a try/catch for this?
try {
const mydata = await myApiToSaveFile(fileName);
} catch(e) {
const mydata = await myApiToSaveFile(generateUUID());
}
I have written the following function in js to verify a ReCAPTCHA token:
export async function validateHuman(token) {
const secret = "funny_little_secret";
const response = await fetch(
"https://www.google.com/recaptcha/api/siteverify?secret=" +
secret +
"&response=" +
token,
{ method: "POST" }
);
const data = response.json();
return data.success;
}
For reasons I do not understand, I get a fetch error while running this. I have looked in to a few other versions of the functions but have not yet found a solution.
Moreover, the token is correct and is produced according to the documentation, so I am wondering whether there is something wrong about my secret, as I have seen others use something along the lines of process.env.secret, which I have tried without success, or it there is something I do not understand about the fetch function.
This is the complete error:
Uncaught TypeError: Failed to fetch
validateHuman # http://localhost:3000/static/js/bundle.js:3384:26
thanks in advance
I am trying to get the latitude and longitude of user location using google api
I have tried doing this using the fetch method in javascript but I do not get any response. There's no error or anything.
The documentation says to fetch it this way:
https://www.googleapis.com/geolocation/v1/geolocate?key=MY_API_KEY
How I fetch it:
const res = await fetch(https://www.googleapis.com/geolocation/v1/geolocate?key=MY_API_KEY)
const response = await res.json()
When I first did it like above I got an error because it returned nothing which I found out after console.logging res.text()
I do not know what I'm doing wrong In the documentation they equally said something about including Request body but it's optional, So I have no need to include it. Please do you have any ideas on what I'm doing wrong?
I believe you need to send this as a POST request according to the documentation you linked. By default fetch sends a GET request.
To do that you just need to pass in the request type to the fetch function
const response = await fetch(<URI>,{method:'POST'});
const res = await response.json()
console.log(res)
class Fetch {
async getCurrent(input) {
const apiKey = "my_api_key";
// make request to url
const response = await fetch(
`https:/api.openweathermap.org/data/2.5/weather?q=${input}&appid=${apiKey}`
);
const data = await response.json();
console.log(data);
return data;
}
}
above is a snippet of code, can someone point me to the direction of the error?
I'm assuming you are running this code in Node.js, right?
If it's in the browser, you shouldn't have any issue since the fetch() API is implemented in the browser.
If you are running in Node.js you can use node-fetch which is a great implementation of fetch in Node.js.
Your code works fine. Problem can be in that how you call function.
You need to create an object, outside the class and call the function.
let f = new Fetch();
f.getCurrent("Kiev");
You can`t use variable name fetch because this name is reserved.
I am using a combination of Laravel and javascript to return data from the database. Unfortunately I am getting the following error
JSON.parse: unexpected character at line 1 column 1 of the JSON data
However I am using the toJson() function in laravel so I have no idea why it is saying it is not properly parsed
Action From Controller
public function getSourceListForSpecificSystem(int $system_id){
$systems = $this->sourceObject->select('id','name')->where('systems_id',$system_id)->whereNull('deleted')->get()->toJson();
return $systems;
}
JavaScript
const getSources = async function(systemId){
try{
const response = await fetch('/sources/get_systems_sources/'+systemId);
const json = await response.json();
await console.log(json);
}catch(e){
console.log(e);
}
//console.log(json);
};
getSources(systemId);
now if I call the url directly from the browser I get what appears to be correct data
([{"id":1,"name":"Players Handbook"}])
I am sure I am just doing something stupid, but I am not sure what that is.
I would appreciate any help