Estou tentando iterar sobre uma matriz de objetos e, dependendo do conteúdo de alguns desses objetos, preciso executar uma função de busca, aguardar o resultado antes de atualizar a nova matriz.
Aqui está meu js:
const allPosts = [
{
"type": "image",
"is_blocks_post_format": true,
"blog_name": "jessicaharbydotcom",
"id": 744489834793566200,
"id_string": "744489834793566208",
"is_blazed": false,
"is_blaze_pending": false,
"can_blaze": false,
"post_url": "https://jessicaharbydotcom.tumblr.com/post/744489834793566208/shield-2018-wax-display-case-light-shield-is-a",
"slug": "shield-2018-wax-display-case-light-shield-is-a",
"date": "2024-03-09 16:13:54 GMT",
"timestamp": 1710000834,
"state": "published",
"format": "html",
"reblog_key": "4O3x5WWb",
"tags": [
"shield"
],
"note_count": 0,
"title": "",
"body": "<div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"/></figure></div><p>Shield<br/>2018<br/>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist’s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p>",
"reblog": {
"comment": "<p><div class=\"npf_row\"><figure class=\"tmblr-full\" data-orig-height=\"4032\" data-orig-width=\"2640\"><img src=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg\" data-orig-height=\"4032\" data-orig-width=\"2640\" srcset=\"https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s75x75_c1/eb876d72933b6138eeba73ca59499c3809975b61.jpg 75w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s100x200/21f86af6b60e44ba7d90090281dc1a1461494805.jpg 100w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s250x400/eba73e6b36bf95f9473e9276592794923583d9de.jpg 250w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s400x600/f202a41604edd3e6cfeee2f9457620bbc87accff.jpg 393w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s500x750/3def886512d22590bb2b72396d147cb8007ccd46.jpg 491w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s540x810/d83eb22083d9dafb4feae95e2f4a2ca0553e0ae8.jpg 530w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s640x960/d85c9c2f7f4ff41832f548cc2cac89905e6fe01b.jpg 629w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s1280x1920/1c03d83fdad14df8334745de77595cd9d2215ce7.jpg 1257w, https://64.media.tumblr.com/49d61fefb0215ba9d4b0af70a6e5c688/2c5835b67d79732a-9a/s2048x3072/ee6e6bf1448c6304fbf6cbed93062b9ca520baf3.jpg 2011w\" sizes=\"(max-width: 1280px) 100vw, 1280px\"></figure></div><p>Shield<br>2018<br>Wax, display case, light</p><p>Shield is a meditation on masculinity and power. The tiles are wax casts of the substantial belt buckle once belonging to the artist’s grandfather, who was a Chicago Police Sergeant investigated in the 1970s as part of a ring of police shaking down motorists for payoffs. While eventually granted immunity from prosecution by the state, he was indicted, along with two fellow policemen, for perjury by a grand jury for lying about his involvement.</p></p>",
"tree_html": ""
},
"can_reply": false,
"display_avatar": true
},
{
"type": "video video-embed",
"is_blocks_post_format": true,
"blog_name": "jessicaharbydotcom",
"id": 744485994035904500,
"id_string": "744485994035904513",
"is_blazed": false,
"is_blaze_pending": false,
"can_blaze": false,
"post_url": "https://jessicaharbydotcom.tumblr.com/post/744485994035904513/referendum-ask-me-how-do-i-feel",
"slug": "referendum-ask-me-how-do-i-feel",
"date": "2024-03-09 15:12:51 GMT",
"timestamp": 1709997171,
"state": "published",
"format": "html",
"reblog_key": "qL2EmJnA",
"tags": [
"referendum"
],
"short_url": "https://tmblr.co/ZXen9PfKyX4kmu01",
"summary": "Referendum (Ask Me How Do I Feel)",
"should_open_in_legacy": false,
"recommended_source": null,
"recommended_color": null,
"note_count": 0,
"title": "",
"body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br/>2016<br/>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
"reblog": {
"comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/181950781\",\"display_url\":\"https://vimeo.com/181950781\",\"title\":\"Referendum (Ask Me How Do I Feel)\",\"description\":\"Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative. The film speaks d\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"ad17645e0781329536708048ee806163:9100d8a78851c197-1c\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/181950781\" target=\"_blank\">Referendum (Ask Me How Do I Feel)</a></p><p>Referendum (Ask Me How Do I Feel) <br>2016<br>Single channel video</p><p>Referendum (Ask Me How Do I Feel) uses footage from the classic film A Matter of Life and Death to create a new narrative, speaking directly to the viewer as the men onscreen debate and decide important matters, failing to provide answers to the direct questions posed. </p>",
"tree_html": ""
},
"can_reply": false,
"display_avatar": true
},
{
"type": "video video-embed",
"is_blocks_post_format": true,
"blog_name": "jessicaharbydotcom",
"id": 744393264438837200,
"id_string": "744393264438837248",
"is_blazed": false,
"is_blaze_pending": false,
"can_blaze": false,
"post_url": "https://jessicaharbydotcom.tumblr.com/post/744393264438837248/affirmation-2016",
"slug": "affirmation-2016",
"date": "2024-03-08 14:38:57 GMT",
"timestamp": 1709908737,
"state": "published",
"format": "html",
"reblog_key": "jniGZGhJ",
"tags": [
"affirmation"
],
"short_url": "https://tmblr.co/ZXen9PfKdRha4W00",
"summary": "Affirmation (2016)",
"should_open_in_legacy": false,
"recommended_source": null,
"recommended_color": null,
"note_count": 0,
"title": "",
"body": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br/>2016<br/>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
"reblog": {
"comment": "<p class=\"npf_link\" data-npf='{\"type\":\"link\",\"url\":\"https://vimeo.com/153949952?share=copy\",\"display_url\":\"https://vimeo.com/153949952?share=copy\",\"title\":\"Affirmation (2016)\",\"description\":\"Affirmation (2016) uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton wa\",\"site_name\":\"Vimeo\",\"poster\":[{\"media_key\":\"cd78c9656df6b9381417c980464efff7:86fa2ab3c65a5863-70\",\"type\":\"image/webp\",\"width\":1920,\"height\":1080}]}'><a href=\"https://vimeo.com/153949952?share=copy\" target=\"_blank\">Affirmation (2016)</a></p><p>Affirmation <br>2016<br>Single channel video</p><p>Affirmation uses footage from the 1923 Buster Keaton film Three Ages as the basis for a guided meditation in vulnerability. Keaton was badly injured shooting this portion of the film and chose to keep the jarring moment of impact in the finished comedy.</p>",
"tree_html": ""
},
"can_reply": false,
"display_avatar": true
},
{
"type": "video",
"is_blocks_post_format": true,
"blog_name": "jessicaharbydotcom",
"id": 744393060798136300,
"id_string": "744393060798136320",
"is_blazed": false,
"is_blaze_pending": false,
"can_blaze": false,
"post_url": "https://jessicaharbydotcom.tumblr.com/post/744393060798136320/very-realistic-2021-single-channel-video-in-the",
"slug": "very-realistic-2021-single-channel-video-in-the",
"date": "2024-03-08 14:35:43 GMT",
"timestamp": 1709908543,
"state": "published",
"format": "html",
"reblog_key": "hpmXLQE1",
"tags": [
"very realistic"
],
"short_url": "https://tmblr.co/ZXen9PfKdOjw8u00",
"summary": "Very Realistic\n2021\nSingle channel video \nIn The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London...",
"should_open_in_legacy": false,
"recommended_source": null,
"recommended_color": null,
"note_count": 0,
"title": "",
"body": "<figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&byline=0&portrait=0&app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br/>2021<br/>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br/>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p>",
"reblog": {
"comment": "<p><figure class=\"tmblr-full tmblr-embed\" data-provider=\"vimeo\" data-url=\"https://vimeo.com/544276930?share=copy\" data-orig-width=\"540\" data-orig-height=\"304\"><iframe src=\"https://player.vimeo.com/video/544276930?title=0&byline=0&portrait=0&app_id=122963\" width=\"540\" height=\"304\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\" title=\"Very Realistic (2021)\"></iframe></figure><p>Very Realistic<br>2021<br>Single channel video </p><p>In The Great Muppet Caper (1981), reporters Kermit, Fozzie, and Gonzo travel to London to investigate a jewel theft. Whilst riding in a red double-decker bus over the Thames, the following exchange takes place:</p><p>Fozzie: Wow, look at the scenery!<br>Gonzo: It’s very realistic.</p><p>It is 2021, we have lived/are living through a collective trauma and during a car ride the landscape turned to a throbbing reality and we secretly begged to be let back inside.</p></p>",
"tree_html": ""
},
"can_reply": false,
"display_avatar": true
}
]
let filteredPosts = [];
const output = document.querySelector('.output');
const parser = new DOMParser();
const setPostsByType = () => {
let doc;
let videoThumbnail = '';
for (let i = 0; i < allPosts.length; i++) {
const item = allPosts[i];
if (item.body) {
doc = parser.parseFromString(item.body, 'text/html');
}
if (item.type.includes('video')) {
let videoID = doc.querySelector('a')?.getAttribute('href')?.split('vimeo.com/')[1]
||
doc.querySelector('[data-url]')?.getAttribute('data-url')?.split('vimeo.com/')[1];
if (videoID && videoID.includes('?')) {
videoID = videoID.split('?')[0];
}
console.log(videoID);
fetch(`https://vimeo.com/api/v2/video/${videoID}.json`)
.then((response) => {
return response.text();
})
.then((data) => {
const { thumbnail_large } = JSON.parse(data)[0];
videoThumbnail = thumbnail_large + '.jpg';
console.log(videoThumbnail);
return videoThumbnail; // this is asynchronous so being returned after the rest of my function is processed
})
.catch((error) => {
console.log(error);
});
}
const postObject = {
id: item.id,
post_id: `postid__${item.id}`,
body: item.body,
video_thumbnail_id: videoThumbnail, // this is always empty due to the fetch being asynchronous
type: item.type,
tags: item.tags,
date: item.date
}
filteredPosts.push(postObject);
}
};
setPostsByType();
output.textContent = JSON.stringify(filteredPosts, null, 4);<pre class="output"></pre>Desculpe, há muitos dados, este já é um conjunto filtrado. Há também um JSFIDDLE aqui: https://jsfiddle.net/lharby/wrLpheok/ que contém um conjunto maior de dados.
Eu sei que o problema é que a busca é assÃncrona e que os mapas for loops são executados de acordo com a ordem do evento. O conteúdo id'sde cada postagem de vÃdeo é registrado no console, mas depois que o filteredPostsarray é enviado.
Aqui está o que eu tentei:
- Envolvendo tudo dentro de uma função assÃncrona.
- Crie uma função que deve retornar o postObject e executá-lo dentro da
fetch .then()função (mas é claro que isso está envolvido em uma instrução if, portanto, filtra os itens no array com base no tipo de postagem) - Use um mapa em vez de um loop for.
Tenho visto mais perguntas sobre SO em que os usuários desejam chamar primeiro um endpoint da API de busca e depois mapear itens, mas meu problema é o contrário, só posso chamar a função de busca depois de iterar em cada corpo da postagem e ela tiver atendido minha condição.
Qualquer ajuda será muito apreciada.
Basta usar
async/await, isso tornará seu código mais legÃvel e gerenciável. Evite.then()lógica complexa.const result = await Promise.all(items.map(async item => {...}));é um padrão comum para transformar um array com alguma lógica assÃncrona em um novo.Você também tem um erro quando não há
item.bodye pode tentar chamardoc.querySelectoro documento sendoundefined.