Fetch API get raw value from Response - react-native

I use React-Native request some data, here is my code:
fetch('https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json')
.then((response)=>{
return response.json()
})
.then((responseJSON)=>{
callback(responseJSON)
})
.catch((error)=>{
console.error(error);
})
.done()
I see the response is a Response object, and the json function code is return this.text().then(JSON.parse), I'm confused that what is the parameter of theJSON.parse? Is that the response raw value? How can I get it?

Here's how you'd do what you want. In my case I wanted to manually parse the JSON because a certain character (\u001e) is improperly parsed by the in-built JSON parser.
Change from:
fetch(url)
.then(response => response.json())
.then((data) => {
data....
to:
fetch(url)
.then(response => response.text())
.then((dataStr) => {
let data = JSON.parse(dataStr);
data...

Related

How to get data's property value after axios.get call?

It's Vue.js app and the code looks as following:
getQrCodeUrl(paymentId) {
this.$axios.get(`${this.$config.server}/api/crm/payments/qr/${paymentId}/url`)
.then(responseUrl => {
console.log('responseUrl.data =', responseUrl.data)
console.log('responseUrl.data.url =', responseUrl.data.url)
})
.catch(error => {
...
})
},
I've got responseUrl.data, but responseUrl.data.url is undefined as in the screenshot below:
The screenshot shows you that responseUrl is an object with result and data properties. I believe it is the successful promise. By adding a .then(response => response.json()), you will have the data by itself as a JSON object.
Refactor the code as follows :-
getQrCodeUrl(paymentId) {
this.$axios.get(`${this.$config.server}/api/crm/payments/qr/${paymentId}/url`)
.then(response => response.json())
.then(response => {
console.log('response.url =', response.url)
})
.catch(error => {
...
})
},

Pass data from one API to another using Vue.js

I am making an API call to return a list of appointments. Each appointment has a clientID as a FK so that we can get client information. Is it possible to get that clientID when I make the call to the appointments API and use the clientID to make a call to a client using ID. Here is what I was thinking of how it might work but it is not working. Also an explanation of why this doesnt work would be nice.
export default{
data (){
return{
appointment: [],
client: []
}
},
created() {
axios.get("http://localhost:3000/api/appointment")
.then(res => this.appointment= res.data)
.catch(err => {
console.log(err)
}),
axios.get("http://localhost:3000/api/client/" + this.appointment.clientID)
.then(res => this.client = res.data)
.catch(err => {
console.log(err)
})
}
It does not work, beacause both axios calls are made simultanisously.
clientID is not defined, when you make the second axios call
Make sure the first call is done before using data from that response.
axios.get(...)
.then(response => {
this.appointment = response.data
axios.get(".../" + response.data.clientID)
.then(response => this.client = response.data
})
.catch(e => console.log(e))

How to fetch an online array to a VueJs app

I have an online array online array link
that I want to add to my VueJs project I use this code:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => console.log(json))
.then(json => {
this.lists = json.lists
})
from VueMastery at Vue.org but it doesn't work, gives me an error Json.lists isn't defined
Remove this line
then((json) => console.log(json))
You are returning console.log(json) it doesnt make sense
If you want still to log it do it like this
then(json => {
console.log(json);
return json;
})

Storing the access token and the status response in React Native

So I am trying to get the status of the response and check if it was 200 and then I want to store the access token in a global variable.
.then((response) => response.json())
.then((responsejson) => {
alert(responsejson.access_token);
console.log(response.text());
})
In the above sample code I can access the access_token , but if I want the response.status so I can check its value I get undefined, so how can I get access for this two value without getting undefined?
.then((response) => {
console.log(text2);
if (response.status == 200) {
}
Here I can get the response.status and the access_token will be undefined.
Have you tried to parse the response into json format after the status checking ?
.then((response) => {
if (response.status == 200) {
response.json().then((responsejson) => {
alert(responsejson.access_token);
})
});
If you have acces to the status in the second block and to the token on the first block, why don't you just mix both of them ?

Parsing JSON in React Native fetch method doesnt work

Im trying to call an API with fetch from React Native App but itdoesnt log the response data (console.warn('data', data)) for some reason. It prints the 'call to getArtists' log but then nothing happens.
const URL = 'https://jsonplaceholder.typicode.com/posts'
function getArtists(){
console.log('call to getArtists')
return fetch(URL)
.then(response => response.json())
.then(data => {
console.warn('data', data)
})
}
Code is available here: https://snack.expo.io/rkzea2Zlm at components/api-client.js
What am I doing wrong?
First in your "api_client.js", put a return inside like the code bellow.
function getArtists(){
console.log('call to getArtists')
return fetch(URL)
.then(response => response.json())
.then(data => {
return data
})
}
In your App.js just do that inside componentWillMount.
componentDidMount(){
getArtists()
.then(data => {
alert(JSON.stringify(data))
});
}