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;
})
Related
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 => {
...
})
},
This API call work when I use this URL with "Ngrok" server "http://d098a0255d41.ngrok.io/api/GetTrainers" but it doesn't work with my local address and I don't want to keep using the "Ngrok" one forever.
I tried countless methods but they never worked for me, I much appreciate some help or any clues in this!!
fetch("https://192.168.1.228:5001/api/GetTrainers")
.then((response) => response.json())
.then((responseJson) => {`enter code here`
setData(responseJson);
setFullData(responseJson.results);
setLoading(false);
})
.catch((error) => {
console.error(error);
setLoading(false);
setError(err);
});
}, []);
React.useEffect(() => {
let isMounted = true;
fetchData()
}, [fetchData]);
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))
});
}
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...
hi i am trying to fill array with custom data using multiple apis in react native but unable to do so as nested fetch api giving unpredicatable result my final array is always empty .
Any help would be appreciated
Thanks in advance
below is my code please tell what i am doing wrong here..
fetchSubcategories(category_id){
var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
const set = [];
const subcategoriesArray=[];
fetch(url)
.then((response) => response.json())
.then((responseData) => {
for (var i = 0; i < responseData.length; i++) {
set.push(responseData[i]);
}
console.log('response subcategories : '+JSON.stringify(set,null,2));
})
.then(()=>{
for(var j=0;j<set.length;j++){
var name=set[j].name;
var id=set[j].id;
fetch(url)
.then((response) => response.json())
.then((responseData) => {
var subcategory={
name:name,
id:id,
products:[]
}
subcategoriesArray.push(subcategory);
}).done()
}
})
.done()
console.log('final custom josn array : '+JSON.stringify(subcategoriesArray,null,2));
}
Note : urls used above giving the proper result on my end the only thing is final subcategoriesArray should be filled.
fetch is "asynchronous", so your console.log is probably running before the request has actually finished, but the array is actually being populated.
To test: try moving your console.log to just after subcategoriesArray.push(subcategory);
You should see it log out the array for each set, but at least you can see it is actually being populated.
You could wrap the function in a Promise so you can get the array after it has been async populated:
fetchSubcategories(category_id){
return new Promise((resolve, reject) => { // <- add this
var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
const set = [];
const subcategoriesArray=[];
fetch(url)
.then((response) => response.json())
.then((responseData) => {
for (var i = 0; i < responseData.length; i++) {
set.push(responseData[i]);
}
console.log('response subcategories : '+JSON.stringify(set,null,2));
})
.then(()=>{
for(var j=0;j<set.length;j++){
var name=set[j].name;
var id=set[j].id;
fetch(url)
.then((response) => response.json())
.then((responseData) => {
var subcategory={
name:name,
id:id,
products:[]
}
subcategoriesArray.push(subcategory);
if(j == set.length-1) { // <- add this block
resolve(subcategoriesArray);
}
}).done();
}
}).done()
}); // <- completes promise block
}
You can then use it like this:
fetchSubcategories(category_id).then((subCatArray) => {
console.log('final custom join array', subCatArray);
});
Hope this helps! :)