I'm having issues with getting data from my fetch API. It was working previously when I had "test" inside of a class. Now that it's inside of a function, I get "undefined" when I try to console.log(data). (Note, the API call is working on the server. console.log(res.json()) returns a data. I'm LOST.
const test = () => {
fetch('/api/test/', {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({zip: val})
})
.then(res => { res.json()}) //THIS RETURNS OK
.then(data => {console.log({data})}) //THIS IS WHERE I HAVE PROBLEMS
}
EDIT:
I also tried
.then(data=> {console.log(data)})
and
.then(data => {console.log([data])})
is there something I'm missing?
Arrow_functions
You should return res.json() to work successfully;
.then(res => { return res.json()})
or
.then(res => res.json())
Related
In my app component, I have state features that contains an array(1500) of arrays(9). I want to send the state (or large array) to my backend so I can run my model and return labels with the following function:
const getLabels = (model) => {
fetch('/spotify/get-labels', {headers: {
'model': model,
'features': features
}})
.then(response => response.json())
.then(data => setLabels(data))
}
However, the response has status 431. This was kinda expected, but I'm not sure how to transmit the data to my backend efficiently. Maybe convert it to json and then put in the headers of my request?
You can try something like this with fetch:
fetch('/spotify/get-labels', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ model, features }),
})
.then((response) => response.json())
.then((data) => {
// Boom!
})
.catch((error) => {
// An error happened!
});
or with axios
axios
.post('/spotify/get-labels', { model, features })
.then((data) => {
// Boom!
})
.catch((error) => {
// An error happened!
});
As far as I'm understanding your concern, I guess passing the 'model': model,'features': features in body should work.
Or using Axios, you can make the request. It exactly like Axios but far better
axios({
url: '/spotify/get-labels',
method: "post",
data: {
'model': model,
'features': features
},
})
.then((response) => response.json())
.then(data => setLabels(data))
.catch((error) => {
console.log("error : ", JSON.parse(error));
});
Trying to fetch api data on frontend using useEffect hook,
i am able console log the data but unable to map it somehow
new to react
console output
function SlugBook() {
// let {slug} = useParams(),
const [state, setState] = useState([])
useEffect(() => {
fetch("http://127.0.0.1:8000/app/reviews/",{CSRF_TOKEN....}
)
.then(response => response.json())
.then(data => console.log(data)) -->works fine
.then(data => setState(data)); --> not sure
})
return (
<p>
{state.map( d => (<li>{d}</li>))} ---> error code ()
</p>
)
}
export default SlugBook
Two problems:
You need to set your state inside the second then like so:
useEffect(() => {
fetch("http://127.0.0.1:8000/app/reviews/",{
credentials: 'include',
method: 'GET',
mode: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': CSRF_TOKEN
}})
.then(response => response.json())
.then(data => setState(data))
})
You need to use a dependency array in your useRef or else you will get infinite re-renders. So change it to:
useEffect(() => {
fetch("http://127.0.0.1:8000/app/reviews/",{
credentials: 'include',
method: 'GET',
mode: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': CSRF_TOKEN
}})
.then(response => response.json())
.then(data => console.log(data)) -->works fine
.then(data => setState(data)); --> not sure
}, [])
Setting the dependancy array to an empty array [] will ensure that your useEffect only runs your fetch once on first render.
Hi I am trying to fetch data from API with apiKey.
But get undefined
const fetchTest = (url, key) => {
fetch(url, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-AUTH-TOKEN': key
}
}).then((response) => response.json())
.then((responseData)=> responseData);
};
const { data, error } = useSWR(['api/link','apiKey'], (url, key) => fetchTest(url, key));
If I try to console.log(data) always get undefined.
But strange thing if I will use console.log() inside of fetchTest() right after
.then((responseData)=> responseData) and will do something like .then((response) => response.json()).then((responseData)= console.log(responseData))
I get exactly what I need. Am I doing something wrong ?
You are not returning the fetch.
you should put the return statement before the fetch or remove the curly bracers like this => fetch
I'm quite new to react and have an issue that i'm not sure whats wrong.
I have one external api with an endpoint that contains articles and another endpoint to get the images thats connected with the articles. I want to display the articles and the images together, but I can't get the images to show.
The flow is as follows:
First I find the article with the article api endpoint and the article id. And it looks like this:
const { itemId } = useParams()
const [article, setArticle] = useState([])
const [articleImg, setArticleImg] = useState('')
const [fileId, setFileId] = useState('')
useEffect(() => {
fetch(`https://api.fortnox.se/3/articles/${itemId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then((data) => {
console.log(data)
setArticle(data.Article)
console.log(data)
})
}, [itemId])
In order to get the image to that article I have to find a FileId by searching the article number against ArticleFileConnections endpoint:
(Documentation)
useEffect(() => {
fetch(`https://api.fortnox.se/3/articlefileconnections/?articlenumber=${itemId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then((data) => {
setFileId(data.ArticleFileConnections[0].FileId)
console.log(data.ArticleFileConnections[0].FileId) // Prints an id-number in the console
})
}, [])
When I have the FileId I use it with another endpoint called Archive in order to get the image. Documentation That fetch looks like this:
useEffect(() => {
fetch(`https://api.fortnox.se/3/archive/${fileId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then((data) => {
setArticleImg(data)
console.log(data) // Prints an object thats a folder structure with an empty array
})
}, [])
I tried to change the ${fileid} to the actual id-number in the archive endpoint like this
https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c Then I get this error message in the console:
Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0
But I don't get that error if I pass the ${fileid} in the endpoint https://api.fortnox.se/3/archive/${fileid} Although when I console.log the state fileId that I pass in it prints the fileId-number.
So what I expect is that the fileId-state that I use in the archive endpoint should display an image by writing this code.
<div>
<img src={articleImg} alt="product" />
</div>
I hope all this is understandable and I hope someone can help me with what i'm doing wrong.
Thank you.
Note: It all works in postman. When I try the endpoints like the flow above it shows the image with this endpoint https://api.fortnox.se/3/archive/8c05c536-c110-402d-82da-60f25f6b0e1c
Your useEffect for fetching the fileId is behaving as a componentDidMount. What you want instead is a componentDidUpdate behavior, which you can do by
useEffect(() => {
fetch(`https://api.fortnox.se/3/archive/${fileId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Token': accessToken,
'Client-Secret': clientSecret
}
})
.then((res) => res.json())
.then((data) => {
setArticleImg(data)
console.log(data) // Prints an object thats a folder structure with an empty array
})
}, [fileId]) // Notice the change here. It ensures that the useEffect is called every time the fileId is updated.
I am trying to implement stripe checkout to me store and I get an error saying:
Here is my code:
onToken = (token) => {
fetch('/save-stripe-token', {
method: 'POST',
body: JSON.stringify(token),
}).then(response => {
response.json().then(data => {
alert(`We are in business, ${data.email}`);
});
});
}
Looks like there was an error parsing the object into json. It would be helpful to know what you are calling onToken with.
Make sure to set Content-Type and Accept headers with application/json when making your request:
fetch('...', {
// ...
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
// ...
})
Make sure to always add a catch block to deal with errors. Also I suggest you return the response.json() instead of dealing with right away in the same then block (this is an anti-pattern that does not help in alleviating callback hell).
fetch(...)
.then(response => {
return response.json();
})
.then(data => {
alert(`We are in business, ${data.email}`);
})
.catch(error => {
// Handle the error here in some way
console.log(error);
});