How to Fix Your Promise.all Fetching Issue with JSON Data in JavaScript

---

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---

You might have a scenario where you're attempting to fetch data from two JSON files (like products and categories) but end up with an empty response. This commonly occurs due to misunderstanding how promises work in JavaScript—specifically, when logging the value of a promise before it has been resolved.

Example Code That Fails

[[See Video to Reveal this Text or Code Snippet]]

In your original code, when you try to log x, what you're actually logging is a promise that hasn't resolved yet. Hence, you see an empty array or undefined.

The Solution: Simplifying Your Code

Here's a simplified version that removes unnecessary complications and ensures that you get the expected results.

Step-by-Step Fix

Create a Fetch Function: Write a helper function to handle the fetching of JSON data. This will clean up your main logic and provide clarity.

[[See Video to Reveal this Text or Code Snippet]]

Log the Response Properly: Make sure that you log the response only after the promise has been resolved.

Updated Code Example

Here’s what the modified code looks like:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Changes

Removed Async/Await: The unnecessary use of async and await made the code harder to follow. You don't need them unless you have other async operations to perform.

Conclusion

In JavaScript, especially when working with promises, it's crucial to understand the asynchronous nature of these operations. By simplifying your code and ensuring that you log data after it has been resolved, you can avoid empty responses and other common pitfalls.