So, I am trying to fetch API from Calendarific I fetch it and I get data in console here is the code below:
btn.addEventListener('click', function fetchApi(){
fetch('https://calendarific.com/api/v2/holidays?&api_key=<myKey>&country=US&year=2019')
.then(res => res.text())
.then(data => {
//holiday.innerHTML = data;
//console.log(data);
console.log(data.holidays[0].name)
})
.catch(err => console.log(err));
// alert('click')
});
But I want to access specific data like. I want to access only the name and how can I do that? Code works fine but I faced problem to access specific data from API I tried holidays[0].name But it shows undefined What I am doing wrong here?
When receiving JSON, instead of
.then(res => res.text())
.then(...
use
.then(res => res.json())
.then(...
Also, according to calendarific documentation, there's a response key you should query first:
console.log(data.response.holidays[0].name)
Related
I am trying to console.log some JSON values from an OpeanSea api call payload.
I can successfully hit the end point as seen in the console
when I run this:
await fetch(`https://api.opensea.io/api/v1/collections?asset_owner=${currentAccount}&offset=0&limit=300`, options)
.then(response => response.json())
.then(response => console.log("collection owned by current address", response))
but when I try to log only one attribute from the response object:
await fetch(`https://api.opensea.io/api/v1/collections?asset_owner=${currentAccount}&offset=0&limit=300`, options)
.then(response => response.json())
.then(({ assetts }) => {
assetts.forEach((attributes) => {
console.log(attributes.name)
})
})
I see
TypeError: Cannot read properties of undefined (reading 'forEach')
Is
assetts
an arbitrary name to iterate through? I think this is what i dont understand
You should know the structure of json and target the required attributes. Like in your case its collections array which is array of object and each object contains name key so you can target key like:
await fetch(`https://api.opensea.io/api/v1/collections?asset_owner=${currentAccount}&offset=0&limit=300`, options)
.then((response) => {
return response.json();
})
.then((assetts) => {
assetts.collections.forEach((attributes) => {
console.log(attributes.name);
});
})
.catch((error) => {
console.log({ error });
});
In your first then block you should have to return response after parsing it, if you want to use the parsed data in next then block.
Tip: It is a good practice if you also handle error by putting catch block after then block.
return fetch(url)
.then(response => response.json())
.then(json => {
//everything just here?
})
.catch(err => console.log(err));
Hello guys i have a newbie question. If i want to get some data from server and manage them (create new html elements, draw some canvas) am i forced to do it this way in ".then" chain? Im asking because its quite unintuitive. And ill be glad for some example of code like this, just get data from server and create/edit some html elements. Thanks!
You can do it in more intuitive way like this
getDataFromServer(url) {
return fetch(url)
.then(response => response.json());
}
async yourMainFunction() {
const data = await getDataFromServer(url);
////everything just here with data from server?
}
one thing to note that for using await you have to make your function marked with async
You are correct, the only place the response json is avalable is in the second then() callback.
You could create a function that contains your html/canvas logic and then call that function in the response callback.
fetch(url)
.then(response => response.json())
.then(json => {
handleResponse(json) // ⭐️
})
.catch(err => console.log(err));
function handleResponse (json) {
// ⭐️ everything in here
}
I am trying to get data from the API and it doesnot return any value. I have tried to put the apiUrl in the browser directly it works there. Even a get request via postman returns request.
fetch(apiUrl)
.then((response) => {
let data = JSON.parse(response)
console.log(data)
return data;
})
Also in Chrome debugger, there is no request in the network tab as well. I have used the same code earlier to get the response.
Calling the API with Fetch gives a promise, and converting it to JSON will return yet another promise, which you need to "await" for again. This is how it should look like
fetch(URL)
.then(response => response.json())
.then(json => console.log(json))
fetch(apiUrl)
.then((response) => {
return response.json().then( res => {
let data = res;
console.log(data)
return data;
})
})
try this
My goal is to display some data on a webpage that I have obtained with a Fetch using HTML.
My Fetch (which works) looks like this
<script>
let response = fetch(
"https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
)
.then((response) => response.json())
.then((response) => console.log(response.events[0].title));
</script>
The code works and logs a response to the console as I've requested. Now, I'd like to show some of the response on my webpage.
My attempts have looked something like this
<center><h2 id="response"></h2></center>
<script>
let response = fetch(
"https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
)
.then((response) => response.json())
.then((response) => console.log(response.events[0].title))
.then((response) => {
document.getElementById("response").innerHTML = response.events[0].title;
});
</script>
Context and details:
I've done some mobile dev, but I'm a noob with even basic HTML/JS interaction on web so there are some holes in my knowledge here
I'll be implementing this code injection as a code block on a Squarespace (Adirondack template, Adirondack family) but I don't think the Squarespace context should matter (the Fetch works just fine, and the code injection has been displaying other things just fine)
Error from my attempt: VM22305 about:srcdoc:8 Uncaught (in promise) TypeError: Cannot read property 'events' of undefined
I'm not committed to any particular way of displaying, I'm just trying to get the ball rolling by seeing something on the page
Thanks for your help!
Your second then is console logging and returning nothing (console.log returns undefined), so in the next then statement the response is undefined.
Change your code to:
<center><h2 id="response"></h2></center>
<script>
let response = fetch(
"https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
)
.then((response) => response.json())
.then((response) => {
console.log(response.events[0].title);
return response;
})
.then((response) => {
document.getElementById("response").innerHTML = response.events[0].title;
});
</script>
And it should work.
If you want a chain of thens, you need to return a promise to the next one, like this:
let response = fetch(
"https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
)
.then((response) => response.json())
.then((response) => {
document.getElementById("response").innerHTML = response.events[0].title;
});
I'm trying to convert a response from fetch function into json format but when I do so I get an error Attempt to invoke interface method 'java.lang.string com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null object reference.
Here is my code snippet with fetch function:
export const fetchAllUsers = () => {
fetch('http://192.168.1.103:3000/api/userData')
.then(res => {
res.json();
//console.warn('res keys = ' + Object.keys(res))
})
}
If comment back the row with console.warn I see the following "res keys = type, status, ok, statusText, headers, url, _bodyInit, _bodyBlod, bodyUsed".
bodyUsed = false
status = 200
type = default
Why I can't convert a response into json format? Or is there any another way to do so?
UPDATE
I've added the second then but I still get the error and the console.warn('res is json') is not running:
export const fetchAllUsers = () => {
fetch('http://192.168.1.103:3000/api/userData')
.then(res => {
res.json();
//console.warn('res keys = ' + Object.keys(res));
})
.then(res => {
console.warn('res is json');
console.warn(res);
})
}
UPDATE_2
I've run fetch function with another url but still got the problem. It seems like .json() causes the error. When I'm trying to console the result of fetch in the first .then() I get json object with type, status etc keys.
export const fetchAllUsers = () => {
fetch(`http://${localIP}:${port}/api/userData`)
//.then(res => res.json())
.then(json => console.warn('JSON: ' + json))
.catch(e => console.warn('ERROR: ' + e))
}
UPDATE_3
Forgot to mention that I'm creating an Android app with React Native. For testing I'm using a physical smartphone. Chrome version there is 73.0.3683.
I've replaced my fetch query with the following:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json));
But still get the same error.
When I run it in https://jsfiddle.net/ it works. So the reason is hidden inside the code execution on a smartphone.
There must be more context to your problem; see the below snippet. This clearly works.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json));