Скачать или смотреть How to Properly Display JSON Data from PHP Using fetch() in JavaScript

Struggling to display JSON from PHP on your webpage? Learn how to effectively use fetch() in JavaScript to send data to PHP and retrieve JSON output seamlessly.
---
This video is based on the question https://stackoverflow.com/q/70379431/ asked by the user 'Zeb' ( https://stackoverflow.com/u/17693015/ ) and on the answer https://stackoverflow.com/a/70380007/ provided by the user 'Armand Biestro' ( https://stackoverflow.com/u/7221087/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Can't display JSON code in php when send threw fetch() in Javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Properly Display JSON Data from PHP Using fetch() in JavaScript

Are you having trouble displaying JSON data from a PHP backend on your webpage? If you've been using the fetch() API in JavaScript to send data to PHP and found that the JSON is only displaying in the console (or throwing errors), you're not alone! This common issue can be resolved with a few key adjustments to your code. Let's dive into these solutions step-by-step.

Understanding the Problem

The core issue lies in how the JavaScript fetch() function interacts with the PHP script. Often, beginners overlook crucial steps that are necessary for successful data exchange. For instance, while you may successfully send JSON to PHP using fetch(), not configuring the PHP script to handle that data correctly can create complications.

Here’s a recap of what your original JavaScript and PHP code looked like:

Original JavaScript Code

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

Original PHP Code

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

Breaking Down the Solution

1. Modifying the JavaScript Fetch Function

Your first step should be to ensure that your function is returning the response. Instead of just awaiting the fetch call, modify your function to return it as follows:

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

Key Changes:

Changed header to headers (note the plural). This is important as it’s the correct property to set custom headers.

Ensured the fetch function returns the result for further processing.

2. Simplifying the Response Handling

You don’t need to call two then() methods. While it’s a common practice, you can streamline this code by utilizing a single then() call:

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

After modifying your fetch call, the entire async function now looks cleaner and clearer.

3. Correcting the PHP Script

The PHP script also requires a small but critical addition: you need to set the Content-Type header explicitly to indicate that JSON data is being sent. Update your PHP code like this:

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

Key Changes:

Added header('Content-Type: application/json; charset=utf-8'); at the beginning of the script to inform the browser that the response is JSON.

Conclusion

By following these steps, you should now be able to send data from your JavaScript frontend to your PHP backend and receive a correctly formatted JSON response. Always ensure that both your fetch function and PHP script are correctly set up to communicate with each other effectively. With practice and experience, you'll find handling data between JavaScript and PHP becomes second nature. Happy coding!