This is likely a simple question for many, however I find it extremely confusing. I have a 'double fetch' using a 'Promise.all' as follows:
Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts'),
fetch('https://jsonplaceholder.typicode.com/users')
]).then(function (responses) {
// Get a JSON object from each of the responses
return Promise.all(responses.map(function (response) {
return response.json();
}));
}).then(function (data) {
// Log the data to the console
// You would do something with both sets of data here
console.log(data);
}).catch(function (error) {
// if there's an error, log it
console.log(error);
});
My question is how to properly read the results from the fetch calls? If you look at the two URLs the data is laid out differently for each. I understand the two fetch calls format the data as "0" (for 'posts') and "1" (for 'users') respectively. At that point I am having greatly difficulty stripping out specific data. For example I have attempted (among other attempts):
console.log(data[1].address[0].street);
console.log(data[1].address.street);
console.log(data[0].title);
console.log(data[0].title[3]);
Can anybody please explain how to properly retrieve whatever necessary data I need to have from the 'multiple' fetch calls? I am not able to locate resources on the Internet relating to this topic...likely because I don't exactly know what to search for. I thank you in advance. Any help is greatly appreciated, this is very frustrating.
Using data[0] for users and data[1] for posts is working fine, that is not where your issue is.
Your specific log statements won't work because both of the responses are lists of objects. You're trying to access properties from the list instead of selecting an object from the list and accessing the properties there.
For example, if you want to get the address for the very first user you need to do something like the following:
console.log(data[1][0].address.street)