{"id":150,"date":"2020-06-05T14:54:12","date_gmt":"2020-06-05T14:54:12","guid":{"rendered":"https:\/\/danwritescode.com\/?p=150"},"modified":"2020-06-05T14:54:45","modified_gmt":"2020-06-05T14:54:45","slug":"async-await-with-array-prototype-map-whats-the-trick","status":"publish","type":"post","link":"https:\/\/danwritescode.com\/async-await-with-array-prototype-map-whats-the-trick\/","title":{"rendered":"Async \/ Await with Array.prototype.map() &#8211; What&#8217;s the Trick?"},"content":{"rendered":"\n<p>I&#8217;ll try to make this as simple as possible. <\/p>\n\n\n\n<p>If you want to map asyncroniously, the map() will return a list of promises so the new array will return a promise for each call. Makes sense right?<br>Here is the &#8220;oups&#8221; what&#8217;s happening code?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/1\/3 of our fruits are rotten, display how many of each are rotten\nconst basket = [ { apples: 33 }, { pears: 21 }, { peaches: 12 } ]\nconst rotten = basket .map(async (obj) => { return obj.key\/3; });\n\nconsole.log(rotten);\n<\/code><\/pre>\n\n\n\n<p>In this case map() will look <strong>a list of promises<\/strong>. The actual values in rotten will appear when everything is resolved. That&#8217;s why a<strong> Promise.all() <\/strong>is necessary here, because it will return the values when all the promises are resolved. <br><br>The correct code would be: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/1\/3 of our fruits are rotten, display how many of each are rotten\nconst basket = [ { apples: 33 }, { pears: 21 }, { peaches: 12 } ]\nconst rotten = basket .map(async (obj) => { return obj.key\/3; });\n\nconsole.log(rotten);\nconst result = Promise.all(rotten).then((result)=>console.log(result));<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll try to make this as simple as possible. If you want to map asyncroniously, the map() will return a list of promises so the new array will return a promise for each call. Makes sense right?Here is the &#8220;oups&#8221; what&#8217;s happening code? In this case map() will look a list of promises. The actual values in rotten will appear when everything is resolved. That&#8217;s why a Promise.all() is necessary here, because it will return the values when all the promises are resolved. The correct code would be:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,11],"tags":[],"_links":{"self":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts\/150"}],"collection":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":0,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"wp:attachment":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}