I am trying to consume an API which returns structure below.
{
data: [{...},{...},{...},{...},...],
nextUrl: "url_goes_here";
}
The pages end when the nextUrl is null. I want to collect all the elements in data into one array while going through the paginated responses. I tried the following code segment.
const getUserData = async (url) => {
const result = await fetch(url)
.then(res => res.json())
.then(res => {
dataList= [...dataList, ...res.data];
console.log(res.data)
if (res.nextUrl !== null) {
getUserData(res.nextUrl);
} else {
console.log("else ", dataList);
}
})
.catch(err => {});
return result;
}
The console.log can print the result. but I want to get all the data to get into a variable that can be used for further processing later.
Your approach using recursion isn't bad at all, but you're not returning the chunk of data (there's no value returned by your second .then handler). (You're also falling into the fetch pitfall of not checking ok. It's a flaw IMHO in the fetch API design.)
There's no need for recursion though. I'd be tempted to just use a loop:
const getUserData = async (url) => {
const result = [];
while (url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const {data, nextUrl} = await response.json();
result.push(...data);
url = nextUrl;
}
return result;
};
But if you want to use recursion:
const getUserData = async (url) => {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const {data, nextUrl} = await response.json();
if (nextUrl) {
data.push(...await getUserData(nextUrl));
}
return data;
};
or
const getUserData = async (url, result = null) => {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const {data, nextUrl} = await response.json();
if (!result) {
result = data;
} else {
result.push(...data);
}
if (nextUrl) {
result = await getUserData(nextUrl, result);
}
return result;
};
Related
I have an assignment to complete a function that makes API requests using a name. This request will return a json object and this object has a 'height' field that the function should return. I tried but my solution odes not seem to work. Below is my code. Can someone point me in the right direction?
async function getHeight(name) {
let url = "sample url"
https.get(url, (resp) => {
let data = '';
resp.on('data', (chunk) => {
data += chunk;
});
resp.on('end', () => {
let result = (JSON.parse(data));
let result_data = result[data];
if(result_data == null){
return -1
} else{
let cataJson = (JSON.parse(result_data));
return cataJson["height"];
}
});
}).on("error", (err) => {
return -1;
});
}
async function getHeight(name) {
let url = "sample url"
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
this code should be some thing like what you need.
you make a get request to the url then you parse the given data to json format then the function returns that data.
You can use fetch with promise like this.
async function getHeight(name) {
return new Promise((resolve, reject)=>{
let url = "sample URL"
fetch(url)
.then(res=>res.json())
.then(data=>{
let result = (JSON.parse(data));
let result_data = result[data];
if(!result_data)resolve(-1)
else resolve((JSON.parse(result_data)).height)
})
.catch(e=>{reject()})
})
}
And to call the function
async function main(){
try{
var height = await getHeight("John");
console.log(height)
}catch(e){
console.log("Error Fetching height")
}
}
main()
const getHeight = async (name) {
let url = "url"
try {
let res = await fetch(url,{
method: "GET"
);
if (res.ok == true) {
return await res.json();
} else {
throw new Error("error")
}
} catch (error) {
console.log(error);
}
}
I have a part of my code that makes several API calls to different endpoints and I want to know if any of those calls fail so I can display an appropriate error message. Right now, if an error happens in one() it will stop all other calls from happening, but that's not what I want; If an error occurs, I want it to populate the errors object and have the program continue on.
async function gatherData() {
let errors = { one: null, two: null, three: null };
const responseOne = await one(errors);
const responseTwo = await two(errors);
const responseThree = await three(errors);
if (!_.isNil(errors.one) || !_.isNil(errors.two) || !_.isNil(errors.three)) {
// an error exists, do something with it
} else {
// data is good, do things with responses
}
}
gatherData();
async function one(errors) {
await axios
.get("https://jsonplaceholder.typicode.com/comment")
.then(res => {
return res;
})
.catch(err => {
errors.one = err;
return err;
});
}
async function two(errors) {
await axios
.get("https://jsonplaceholder.typicode.com/comments")
.then(res => {
return res;
})
.catch(err => {
errors.two = err;
return err;
});
}
async function three(errors) {
await axios
.get("https://jsonplaceholder.typicode.com/comments")
.then(res => {
return res;
})
.catch(err => {
errors.three = err;
return err;
});
}
If you pass the errors to the async functions, so pass the errors object as parameter
const responseOne = await one(errors);
const responseTwo = await two(errors);
const responseThree = await three(errors);
Getting an error with the "map" part when I try and run it Cannot read property 'map' of undefined"
The customers const is declared above so not sure. Where is the undefined is coming from? Does the map need declaring?
const AWS = require('aws-sdk'),
ses = new AWS.SES(),
fetch = require('node-fetch');
exports.handler = async (event) => {
console.log(event.customer_id);
const customers = await getCustomers();
customers.map(async customer => await sendEmailToCustomer(customer));
const customersEmailsPromises = customers.map(async customer => await sendEmailToCustomer(customer));
}
async function getCustomers() {
try {
const resp = await fetch('https://3objects.netlify.com/3objects.json');
const json = await resp.json();
return json;
}
catch(e) {
throw e;
}
}
const sendEmailToCustomer = (customer) => new Promise((resolve, reject) => {
ses.sendEmail({
Destination:
{ ToAddresses: [customer.email] },
Message:
{
Body: { Text: { Data: `Your contact option is ${customer.customer_id}` } },
Subject: { Data: "Your Contact Preference" }
},
Source: "sales#example.com"
}, (error, result => {
if (error) return reject(error);
resolve(result);
console.log(result);
})
);
})
getCustomers doesn't return anything which means that customers is set to undefined.
Try this:
async function getCustomers() {
try {
const resp = await fetch('https://3objects.netlify.com/3objects.json');
const json = await resp.json();
return json;
}
catch(e) {
throw e;
}
}
You also have to return something from the function that you pass as a parameter to .map
customers.map(async customer => {
return await sendEmailToCustomer(customer);
});
or just:
customers.map(async customer => await sendEmailToCustomer(customer));
And since .map returns a new array (does not mutate the original array), you'll have to store the return value:
const customersEmailsPromises = customers.map(async customer => await sendEmailToCustomer(customer));
I use fetch to get data for each element of an array. Those values are pushed into an array and I want to return the max of those values once all values are fetched.
For that I used a promise:
async function init() {
await maxWaste(nut0Codes).then(response => {
console.log(response);
});
}
function maxWaste(nutCodes) {
return new Promise(resolve => {
let waste = [];
nutCodes.forEach((element) => {
let query = queryMaxWaste(element);
fetch(address + encodeURIComponent(query))
.then(response => {
return response.json();
})
.then(response => {
waste.push(response.results.bindings[0].wasteGeneration.value);
console.log(waste);
});
});
let maxWaste = Math.max(waste);
resolve(maxWaste);
});
}
I am not sure where my mistake is but the resolve happens before the fetch is done :
I receive the zero from the console.log(response) and I don't know why it is not working.
Any advice would be appreciated!
If you're going to write code that uses async, you should actually leverage async. If this needs to be run synchronously-ish, you can await within a for loop. If you want them all to run simultaneously, use a map and Promise.all.
async function init() {
const response = await maxWaste(nut0Codes);
console.log(response);
}
async function maxWaste(nutCode) {
const waste = [];
for (const element in nutCode) {
const query = queryMaxWaste(element);
const response = await fetch(address + encodeURIComponent(query));
const json = await response.json();
waste.push(json.results.bindings[0].wasteGeneration.value);
console.log(waste);
}
const maxWaste = Math.max(waste);
return maxWaste;
}
You could also try writing it like this so that you don't wait for each response to complete before running the next fetch:
async function init() {
const response = await maxWaste(nut0Codes);
console.log(response);
}
async function maxWaste(nutCode) {
const waste = await Promise.all(nutCode.map(async element => {
const query = queryMaxWaste(element);
const response = await fetch(address + encodeURIComponent(query));
const json = await response.json();
return json.results.bindings[0].wasteGeneration.value;
}));
return Math.max(waste);
}
I have this method who performs 3 window.fetch
const API_URL = 'http://localhost:3000/'
, API = {
'getArtistLyric': artist => {
return fetch(`${API_URL}artist?name=${artist}`)
.then(res => res.json())
.then(res => {
const artistID = JSON.parse(res).message.body.artist_list[0].artist.artist_id;
console.log('Artist ID is:', artistID);
fetch(`${API_URL}artist/albums/?artist_id=${artistID}`)
.then(resp => resp.json())
.then(resp => {
const trackID = JSON.parse(resp).message.body.album_list[0].album.album_id;
console.log('Random Track ID is:', trackID);
fetch(`${API_URL}artist/album/songsnippet?track_id=${trackID}`)
.then(response => response.json())
.then(response => {
const lyricSnippet = JSON.parse(response).message;
console.log('Track Id lyric snippet is:', lyricSnippet);
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
});
}
}
Now i want to call it like this
API.getArtistLyric('Prodigy').then(res).catch(err);
What's the best practice here?
If you want to make a chain requests it's better to use async/await :
async func(){
let response = await /* some request */
let res = await /* another request */
...
return results;
}
Here you can use try/catch syntax and wrap specific request :
try {
let response = await...
} catch ( exception) {
...
}
Also you can wrap a couple of requests.
(async() => {
const API_URL = 'http://localhost:3000/';
const API = {
getArtistLyric: async(artist) => {
try {
const res = await fetch(`${API_URL}artist?name=${artist}`);
const artistID = JSON.parse(res.json()).message.body.artist_list[0].artist.artist_id;
console.log('Artist ID is:', artistID);
const resp = await fetch(`${API_URL}artist/albums/?artist_id=${artistID}`);
const trackID = JSON.parse(resp.json()).message.body.album_list[0].album.album_id;
console.log('Random Track ID is:', trackID);
const response = await fetch(`${API_URL}artist/album/songsnippet?track_id=${trackID}`);
const lyricSnippet = JSON.parse(response.json()).message;
console.log('Track Id lyric snippet is:', lyricSnippet);
return lyricSnippet;
} catch (e) {
console.error(e);
}
}
}
try {
const art = await API.getArtistLyric('Prodigy');
console.log(art);
} catch (e ){
console.error(e);
}
})()
Check out this link regarding chaining promises: https://javascript.info/promise-chaining
Here's the core idea:
It looks like this:
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1 return result * 2;
}).then(function(result) { // (***)
alert(result); // 2 return result * 2;
}).then(function(result) {
alert(result); // 4 return result * 2;
});
The idea is that the result is passed through the chain of .then
handlers.
Here the flow is:
The initial promise resolves in 1 second (*), Then the .then handler
is called (**). The value that
it returns is passed to the next .then handler (***) …and so on.