We Keep Coding

How do I access the response value for a fetch/http call using Promise.allSettled?

I'm trying to use Promise.allSettled to call 3 urls and process the results when all are finished. However, I cannot seem to access the value of the responses, which are JSON. Here is my code:
let urlList = ['http...', 'http...', 'http...'];
let fetches = urlList.map(url => fetch(url));
Promise.allSettled(fetches)
.then((results) => { // (*)
results.forEach((result, num) => {
if (result.status == "fulfilled") {
//result.value is a response object and I cannot seem to access the response.body or the actual text/json value of the response
// in chrome developer tools, I can see the results I want, just can't seem to read them here
console.log(result.value);
}
else if (result.status == "rejected") {
console.log(`Failed Calling: ${urls[num]}\n\treason: ${result.reason}`);
}
});
//call other method with combined results...
})
.catch((err) => {
alert(err);
});
console.log output:
What am I missing here? Thanks in advance for the help

Change this:
let fetches = urlList.map(url => fetch(url));
to this:
let fetches = urlList.map(url => fetch(url).then(res => res.json()));
That way your Promise.allSettled() will give you an array of promises that resolve to your final value, not just to the response headers object so your result.value property will be the final value for each promise.

Embedding multiple videos using oEmbed and Javascript

I'm trying to embed multiple videos to a web page using Vimeo's oEmbed. The idea is to simply enter the url in the CMS which will generate a div for each item containing the code below.
This javascript is doing what I want but only works with the first item. When I check the console there's only one response which contains the JSON metadata for the first item/video.
Probably this is not the best method but is getting the job done, all I need is to make it work for multiple items. Any ideas how can I do that?
Thank you
<div class="vimeo-video" id="[[+ID]]-video"></div>
<div class="vimeo-info" id="[[+ID]]-info"></div>
<script>
const getJSON = async url => {
try {
const response = await fetch(url);
if (!response.ok) // check if response worked (no 404 errors etc...)
throw new Error(response.statusText);
const data = await response.json(); // get JSON from the response
return data; // returns a promise, which resolves to this data value
} catch (error) {
return error;
}
}
console.log("Fetching data...");
getJSON("https://vimeo.com/api/oembed.json?url=[[+myVideoURL]]").then(data => {
document.getElementById("[[+ID]]-video").innerHTML = data.html;
document.getElementById("[[+ID]]-info").innerHTML = '<h2>' + data.title + '</h2>' + data.description;
console.log(data);
}).catch(error => {
console.error(error);
});
</script>

In case somebody with basic javascript skills like me goes through something similar. The problem was a rookie's mistake, I had to use var instead of const.
The reason is because var variables can be updated and re-declared but const variables can neither be updated nor re-declared. So here's the working code:
var getJSON = async (url) => {
try {
var response = await fetch(url);
if (!response.ok)
// check if response worked (no 404 errors etc...)
throw new Error(response.statusText);
var data = await response.json(); // get JSON from the response
return data; // returns a promise, which resolves to this data value
} catch (error) {
return error;
}
};

Async Promise returns undefined or zone aware promise

When calling a function that returns a promise, comes back as undefined unless async operators are removed, then returns ZoneAwarePromise, but contains no data.
I know the query returns data when the function executes, it however does not seem to pass that data to the actual return part of the function call.
I have looked at several Stack questions that have not answered this question including this question:
Async/Await with Request-Promise returns Undefined
This is using a REST endpoint to pull data, the console.logs do show the data is correct, however return comes back as undefined
this.allPeople.forEach(async person => {
const dodString = await this.getRelatedRecords(person); //undefined
}
This is the main function that returns a promise / data
async getRelatedRecords(person) {
// function truncated for clarity
// ...
//
console.warn('This async should fire first');
selPeopleTable.relationships.forEach(relationship => {
allRelationshipQueries.push(
arcgisService.getRelatedTableData(
selPeopleTable.url, [person[oidField.name]], relationship.id, relationship.name),
);
});
await Promise.all(allRelationshipQueries).then(allResults => {
console.log('Inside the Promise');
// The Specific node I am looking for
const data = allResults[1].results.relatedRecordGroups[0].relatedRecords[0].attributes.dod;
console.log(data); // Shows correctly as the data I am looking for
return data;
}).catch(function(data){
console.log('there might be data missing', data);
});
}
Removing the ASYNC operators cause the getRelatedRecords() to fire after the containing function and / or return a 'ZoneAwarePromise' which contains no data. I need getRelatedRecords() to fire first, then to run the rest of the code.
I can provide more snippets if need be.
Zone Aware Promise
When the Async operators are (I think) setup correctly

You need to return this as well:
await Promise.all(allRelationshipQueries).then(allResults => {
console.log('Inside the Promise');
// The Specific node I am looking for
const data = allResults[1].results.relatedRecordGroups[0].relatedRecords[0].attributes.dod;
console.log(data); // Shows correctly as the data I am looking for
return data;
})
return in the above block is returning but all of this is in the scope of the arrow function which is then(allResults => { so you also need to return this function like this:
return await Promise.all(allRelationshipQueries).then(allResults => {
Approach #2:
Second way would be to store that into variable like this:
let dataToReturn = await Promise.all(allRelationshipQueries).then(allResults => {
console.log('Inside the Promise');
// The Specific node I am looking for
const data = allResults[1].results.relatedRecordGroups[0].relatedRecords[0].attributes.dod;
console.log(data); // Shows correctly as the data I am looking for
return data;
}).catch(function(data){
console.log('there might be data missing', data);
});
return dataToReturn;

Cloud Functions for Firebase - Error serializing return value:

I have a Cloud Function used to cross reference two lists and find values that match each other across the lists. The function seems to be working properly, however in the logs I keep seeing this Error serializing return value: TypeError: Converting circular structure to JSON . Here is the function...
exports.crossReferenceContacts = functions.database.ref('/cross-ref-contacts/{userId}').onWrite(event => {
if (event.data.previous.exists()) {
return null;
}
const userContacts = event.data.val();
const completionRef = event.data.adminRef.root.child('completed-cross-ref').child(userId);
const removalRef = event.data.ref;
var contactsVerifiedOnDatabase ={};
var matchedContacts= {};
var verifiedNumsRef = event.data.adminRef.root.child('verified-phone-numbers');
return verifiedNumsRef.once('value', function(snapshot) {
contactsVerifiedOnDatabase = snapshot.val();
for (key in userContacts) {
//checks if a value for this key exists in `contactsVerifiedOnDatabase`
//if key dioes exist then add the key:value pair to matchedContacts
};
removalRef.set(null); //remove the data at the node that triggered this onWrite function
completionRef.set(matchedContacts); //write the new data to the completion-node
});
});
I tried putting return in front of completionRef.set(matchedContacts); but that still gives me the error. Not sure what I am doing wrong and how to rid the error. Thanks for your help

I was having the exact same issue when returning multiple promises that were transactions on the Firebase database. At first I was calling:
return Promise.all(promises);
My promises object is an array that I'm using where I'm pushing all jobs that need to be executed by calling promises.push(<add job here>). I guess that this is an effective way of executing the jobs since now the jobs will run in parallel.
The cloud function worked but I was getting the exact same error you describe.
But, as Michael Bleigh suggested on his comment, adding then fixed the issue and I am no longer seeing that error:
return Promise.all(promises).then(() => {
return true;
}).catch(er => {
console.error('...', er);
});
If that doesn't fix your issue, maybe you need to convert your circular object to a JSON format. An example is written here, but I haven't tried that: https://stackoverflow.com/a/42950571/658323 (it's using the circular-json library).
UPDATE December 2017: It appears that in the newest Cloud Functions version, a cloud function will expect a return value (either a Promise or a value), so return; will cause the following error: Function returned undefined, expected Promise or value although the function will be executed. Therefore when you don't return a promise and you want the cloud function to finish, you can return a random value, e.g. return true;

Try:
return verifiedNumsRef.once('value').then(function(snapshot) {
contactsVerifiedOnDatabase = snapshot.val();
for (key in userContacts) {
//checks if a value for this key exists in `contactsVerifiedOnDatabase`
//if key dioes exist then add the key:value pair to matchedContacts
};
return Promise.all([
removalRef.set(null), //remove the data at the node that triggered this onWrite function
completionRef.set(matchedContacts)
]).then(_ => true);
});

I had the same error output with a pretty similar setup and couldn't figure out how to get rid of this error.
I'm not totally sure if every essence has been captured by the previous answers so I'm leaving you my solution, maybe it helps you.
Originally my code looked like this:
return emergencyNotificationInformation.once('value', (data) => {
...
return;
});
But after adding then and catch the error did go away.
return emergencyNotificationInformation.once('value')
.then((data) => {
...
return;
})
.catch((error) => {
...
return:
});
}

We fixed a similar issue with the same error by returning Promise.resolve() at the bottom of the chain, e.g.:
return event.data.ref.parent.child('subject').once('value')
.then(snapshot => {
console.log(snapshot.val());
Promise.resolve();
}).catch(error => {
console.error(error.toString());
});

Reread a response body from JavaScript's fetch

fetch() returns promise which (if successful) resolves to a Response object. A very common thing to do is immediately call Response.json() to convert the response body to a JSON object.
If the response body isn't valid JSON, then the Response.json() promise fails with an error. The message is something along the lines of:
Unexpected token X in JSON at position 0
That's not very helpful when trying to diagnose the problem; ideally I'd like to be able to see the content from the server (which is often an error message).
However, it appears that you can only read the stream at Response.body once (at least in Chrome). (There's even a read-only Response.bodyUsed flag.) That has already happened when Response.json() tries to convert the body to JSON, so the body appears to be lost forever in the event of a JSON parsing failure.
Is there any way to recover the original response body... short of manually reading it (and then converting to JSON) when the original fetch Promise resolves?

Use Response.clone() to clone Response
let clone = response.clone();
Alternatively, use Response.body.getReader() which returns a ReadableStream to read Response as a stream, TextDecoder() to convert Uint8Array data stream to text.

I had to deal with an API that occasionally botched the JSON response - before returning response.json() I made a clone of the response object. using a catch block, I can determine if the error is a SyntaxError, and proceed to fix the error using the text result of the response clone
a little like this:
var brokenJson = function (url) {
var responseCopy;
return fetch(url)
.then(function (response) {
responseCopy = response.clone();
return response.json();
}).catch(function (err) {
if (err instanceof SyntaxError) {
return responseCopy.text()
.then(function(data) {
return fixJson(data);
});
}
else {
throw err;
}
}).then(function (json) {
// do things
});
};
fixJson is just a function that fixes the received data - in my case, when it was broken JSON, it was always broken the same way - I think it had an extra leading { or trailing } - can't recall
re-reading the question, you're more likely to want to log the error to the console rather than fix the json - easy rewrite:
var brokenJson = function (url) {
var responseCopy;
return fetch(url)
.then(function (response) {
responseCopy = response.clone();
return response.json();
}).catch(function (err) {
if (err instanceof SyntaxError) {
return responseCopy.text()
.then(function(text) {
console.error(text);
throw err;
});
}
else {
throw err;
}
}).then(function (json) {
// do things
});
};

Assigning the response.json() to a variable and returning it worked for me. clone() was again saying its locked.
fetch("http://localhost:3000/watchlist")
.then(response => {
var res = response.json();
return res;
})
.then(data => {
console.log(data);
this.setState({ data });
});

I used JSON.parse(response.resp.data) as somehow clone didn't work.