How can I pass fetched data to array called users? I've tried using this.users = data.data, then console.log(users) and nothing is showing up.
Also I am trying to map response, I am getting error in console Uncaught TypeError: fetchData.map is not a function
const users = [];
const fetchData = () => {
axios.get('https://reqres.in/api/users')
.then(({data}) => {
this.users = data.data;
console.log(data);
})
}
fetchData();
const mapUsers = fetchData.map((item) => {
return {
avatar: item.avatar
}
})
May be you would need to move map inside to the callback
let users = [];
const fetchData = () => {
axios.get("https://reqres.in/api/users").then(({ data }) => {
users = data.data;
const mapUsers = users.map((item) => {
return {
avatar: item.avatar,
};
});
console.log("mapUsers", mapUsers);
});
};
fetchData();
or
let users = [];
const fetchData = () => {
return axios.get("https://reqres.in/api/users").then(({ data }) => {
return data.data;
});
};
fetchData().then((data) => {
console.log(data);
const mapUsers = data.map((item) => {
return {
avatar: item.avatar,
};
});
console.log("mapUsers", mapUsers);
});
Related
I know the title is quite confusing, I wasn't sure how to word it better. What I am trying to do is to fetch some items, map through those items to display them, but the problem is that one of those items has a value of what needs to be another api call to access it.
This is what I'm trying to do:
First of all I am storing an empty state, which later on becomes the data of the fetched items:
const [data, setData] = useState([]);
I'm using axios to fetch and store the data:
const fetchItems = () => {
axios("https://swapi.dev/api/people")
.then((response) => {
console.log(response.data.results);
const newData = response.data.results.map((item) => ({
name: item.name,
homeworld: () => {
axios.get(item.homeworld).then((response) => {
response.data.results;
});
},
}));
setData(newData);
})
.catch((error) => {
console.log("error", error);
});
};
It works with the name because it's a simple value. However, the homeworld includes a link that needs to be called once again in order to access it, instead of being a simple value like the name in this case. How can I call it and access what values are held within that link, and display them instead of just displaying the url?
I hope this can help you:
const [data,setData] = useState([])
const fetchItems = () => {
axios("https://swapi.dev/api/people")
.then(response => {
console.log(response.data.results);
const { results } = response.data;
for (const item of results) {
axios.get(item.homeworld).then(({data}) => {
setData([...data,{ name: item.name, homeworld: data.results }]);
});
}
})
.catch(error => {
console.log("error", error);
});
};
or with fetch:
const [data,setData] = useState([])
fetch("https://swapi.dev/api/people").then(re=>re.json())
.then(response => {
const newData = []
const { results } = response;
const newData = [];
for (const item of results) {
fetch(item.homeworld).then(re => re.json()).then((data) => {
newData.push({ name: item.name, homeworld: data });
});
}
console.log(newData)
setData(newData)
})
.catch(error => {
console.log("error", error);
});
Use Promise.all()
You can use Promise.all() method to get all the information you need by creating an array of promises by mapping the response.results array with an async function.
This is the code example
const fetchItems = async () => {
const req = await axios.get("https://swapi.dev/api/people");
const response = await req.data;
const allDataPromises = response.results.map(async (item) => {
const itemReq = await axios.get(item.homeworld);
const itemResponse = await itemReq.data;
return {
name: item.name,
homeworld: itemResponse,
};
});
const allData = await Promise.all(allDataPromises);
};
For further information about Promise.all()
I'm making a get request to an API in a useEffect(). When I navigate to the page from the homepage it loads fine, but as soon as i refresh the page http://localhost:3000/coins/coin I get a Unhandled Runtime Error: Error: Network Error.
export async function getServerSideProps({ query }) {
const id = query;
return {
props: { data: id },
};
}
function index({ data }) {
const coinURL = data.id; // bitcoin
const apiEndpoint = `https://api.coingecko.com/api/v3/coins/${coinURL}`;
const [currentUser, setCurrentUser] = useState();
const [coinData, setCoinData] = useState([]);
useEffect(() => {
const getData = async () => {
const res = await axios.get(apiEndpoint);
const { data } = res;
setCoinData(data);
};
const getCurrentUser = async () => {
const res = await axios.get(
`http://localhost:5000/api/users/${session?.id}`
);
const { data } = res;
setCurrentUser(data);
};
getData();
getCurrentUser();
}, [coinData, currentUser]);
}
Why does this happen?
I'm recommending to do something like this:
const getData = async () => {
try {
const res = await axios.get(apiEndpoint);
const { data } = res;
setCoinData(data);
} catch(err) {
console.log(err)
}
};
const getCurrentUser = async () => {
try {
const res = await axios.get(
`http://localhost:5000/api/users/${session?.id}`
);
const { data } = res;
setCurrentUser(data);
} catch(err) {
console.log(err)
}
};
useEffect(() => {
getData();
getCurrentUser();
}, [coinData, currentUser]);
if you do so, you will be able to view the exact error and fix it.
Hello I'm having a little problem when I try to assign returned value from function into a variable. I've tried this code with a console.log and it displays the right result but when I want to assign this result to a variable it gives undefined value. So here is the code and can u explain it to me what am I doing wrong because I'm a javascript noobie.
const onDataChange = (items) => {
let products = [];
let images = listFromStorage();
//a function call that displays undefined value but should return array
console.log(images);
items.forEach((item) => {
let key = item.key;
let data = item.val();
products.push({
key : key,
title : data.title,
before : data.before,
after : data.after
})
})
setProductList(...productList, products);
}
const listFromStorage = () => {
let storageRef = firebaseService.getStorage().ref().child('/posts/products');
let images = [];
storageRef.listAll().then(function (res) {
res.items.forEach((imageRef) => {
imageRef.getDownloadURL().then((url) => {
images.push({
url : url
});
});
});
return images;
})
.catch(function (error) {
console.log(error);
});
}
You need to not only wait for the asynchronous code to finish, but you need to also return a value from listFromStorage to assign.
const onDataChange = async (items) => { // <-- declare async
const products = [];
const images = await listFromStorage(); // <-- await result
console.log(images);
items.forEach((item) => {
const key = item.key;
const data = item.val();
products.push({
key: key,
title: data.title,
before: data.before,
after: data.after
})
})
setProductList(...productList, products);
}
const listFromStorage = () => {
const storageRef = firebaseService
.getStorage()
.ref()
.child('/posts/products');
const images = [];
return storageRef // <-- return Promise chain
.listAll()
.then(function (res) {
res.items.forEach((imageRef) => {
imageRef.getDownloadURL().then((url) => {
images.push({ url });
});
});
return images;
})
.catch(function (error) {
console.log(error);
});
}
I'm fetching data from API and i would like to add property to my object.
I'm currently adding image property but i need to add this one layer deeper inside object.
Could you give me a hint how to achieve that?
I have stuck on this moment:
My code:
const Review = () => {
const url = "https://jsonplaceholder.typicode.com/users";
const [people, setPeople] = useState(null);
const fetchPeople = async () => {
try {
const response = await fetch(url);
const data = await response.json();
let test = Object.entries(data).map((people) => ({
...people,
image: "image url goes here",
}));
setPeople(test);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
fetchPeople();
console.log(people);
}, []);
Object.entries returns an array [index, value] . You just need to add image property to value which is an object.
fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()).then(data => {
const newData = Object.entries(data).map(people => {
people[1].image = "some image here"
return people;
});
console.log(newData);
});
Using object.entries was bad idea :D
Solution for my question is:
const fetchPeople = async () => {
try {
const response = await fetch(url);
const data = await response.json();
const peopleWithImages = data.map((person, index) => {
return {
...person,
image: `https://robohash.org/?set=set${index + 1}`,
};
});
setPeople(peopleWithImages);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
fetchPeople();
}, []);
I am using a recursive function to make async calls if there is an odata nextlink. It works fine as it is by using map to push the items into teamsArray. The problem hover is that I am looping through each item instead of merging the objects together. I tried to use the following but with no avail:
teamsArray = {}
teamsArray = { ...teamsArray, ...latstestResults}
Current code that does work but is not optimized:
export const fetchAllTeams = () => {
return dispatch => {
dispatch(fetchAllTeamsRequest());
};
};
export const fetchAllTeamsRequest = () => {
return dispatch => {
dispatch(getAllTeamStarted());
let teamsArray = [];
getAllTeams("", teamsArray, dispatch);
};
};
const getAllTeams = (url, teamsArray, dispatch) => {
if (url === "") {
url = "https://graph.microsoft.com/v1.0/me/memberOf?$top=10";
}
const getTeams = adalGraphFetch(fetch, url, {})
.then(response => {
if (response.status != 200 && response.status != 204) {
dispatch(fetchAllTeamsFailure("fout"));
return;
}
response.json().then(result => {
if (result["#odata.nextLink"]) {
const teams = objectToArray(result.value);
teams.map(team => {
teamsArray.push(team);
});
getAllTeams(result["#odata.nextLink"], teamsArray, dispatch);
} else {
const latestResult = objectToArray(result.value);
latestResult.map(team => {
teamsArray.push(team);
});
console.log("the teams", teamsArray);
dispatch(fetchAllTeamsSucces(result));
}
});
})
.catch(error => {
dispatch(fetchAllTeamsFailure(error));
});
};
Something like this might work for you.
I refactored the paged fetching into an async function that calls itself if there are more items to fetch, then eventually resolves with the full array of results.
Dry-coded, so there may be bugs and YMMV, but hope it helps.
export const fetchAllTeams = () => {
return dispatch => {
dispatch(fetchAllTeamsRequest());
};
};
export const fetchAllTeamsRequest = () => {
return async dispatch => {
dispatch(getAllTeamStarted());
try {
const teamsArray = await getPaged(
"https://graph.microsoft.com/v1.0/me/memberOf?$top=10",
);
dispatch(fetchAllTeamsSucces(teamsArray));
} catch (err) {
dispatch(fetchAllTeamsFailure(err));
}
};
};
const getPaged = async (url, resultArray = []) => {
const response = await adalGraphFetch(fetch, url, {});
if (response.status != 200 && response.status != 204) {
throw new Error("failed to fetch teams");
}
const result = await response.json();
objectToArray(result.value).forEach(team => resultArray.push(team));
if (result["#odata.nextLink"]) {
// Get more items...
return getPaged(resultArray, result["#odata.nextLink"]);
}
return resultArray; // All done, return the teams array.
};