I'm trying to add multiple tweets to a page as it is paginated. However, I cannot seem to get widget.createTweet
promises to resolve in order to add their element to the page.
Here is the logic from my reduced Codepen example.
// increment current page number
// create next set of tweets
// append tweet elems to masonry container
async function paginate() {
let current = page;
page = page + 3;
var tweetIDs = source.slice(current, page);
// create tweets/widget promises
const tweetPromises = tweetIDs.map(async id => {
// create grid element
let gridEl = document.createElement("div");
// set masonry class
gridEl.setAttribute("class", "grid__item");
// twitter widget.js - get promise
const response = twttr.widgets.createTweet(id, gridEl, {
theme: colorScheme,
dnt: true
});
return response;
});
// Promise.all over loops
let results = Promise.all(tweetPromises).then((m) => {
console.log("then", m); // never happens
})
.catch(e => {
console.log("catch", e.reason);
});
console.log(tweetIDs, tweetPromises, results, page);
// need the resolved tweets first!
// msnry.appended(newTweetElms);
// msnry.addItems(newTweetElms);
// msnry.layout();
}
This isn't a problem with your use of promises; Twitter just won't resolve the promises unless the element you pass into createWidget
is added to the DOM.
let gridEl = document.createElement("div");
document.querySelector("#twitter").appendChild(gridEl);
Other than that, your code looks fine, aside from your use of then
/catch
in an async
function. (It works, but it can be confusing, because you've got two different styles of asynchronous behavior.) This, for instance, makes it less obvious that your final diagnostic console.log
will always show a Promise for results
. If you were to log await results
(and drop your "never happens" then
and catch
logging) your final console.log
would show your array of actual elements.