Edge Browser pretty display of JSON with window.open

Question

I have a WebService that returns JSON data and I like to view it pretty printed.

a) When I put the url manually into Edge the JSON is displayed pretty printed.

b) When I open in Edge a new tab with Javascript "window.open(url)" the JSON is not formatted.

Examples

a) open https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m

-> The data is displayed Pretty printed.

b.1) I tried a fiddle: Hello World Example - JSFiddle - Code Playground

b.2) go to any page you want, open F12, the console and paste:

window.open("https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m");

-> data is not pretty printed.

Edge Version is 131. I tried also with edge://flags/#edge-json-viewer set to enable.
I guess this is a bug?

Answer 1

Hello Philipp

Welcome to the Microsoft Community.

This is not a bug but a result of how the Edge JSON Viewer behaves when opening a URL programmatically via window.open. Here's an explanation of what's happening and how you can address the issue:

Explanation:

1. Manual URL Entry:
   • When you manually input the JSON URL in Edge's address bar, Edge knows it's serving JSON content and uses its built-in JSON Viewer to pretty-print it.
2. window.open() Behavior:
   • When you use window.open() to programmatically open the URL, Edge does not automatically invoke its JSON Viewer. Instead, it treats the opened page as plain text or raw JSON, and the pretty-print functionality is not applied.
3. Reason:
   • Edge's JSON Viewer may only be triggered when the request is a direct manual navigation or when the JSON content is properly formatted and served with the correct Content-Type (application/json) header, but window.open doesn't trigger the JSON Viewer in the same way.

Solutions:

1. Manually Open the URL

• The simplest workaround is to let the user click the JSON URL (e.g., <a href="URL" target="_blank">Open JSON</a>), which will behave like manual navigation and trigger the JSON Viewer.

2. Open the JSON in a New Tab with Pretty Formatting

• You can use a JavaScript library (e.g., JSON.stringify) to pretty-print the JSON content before displaying it in a new tab or window. Example:

    fetch("https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m")
        .then(response => response.json())
        .then(data => {
            const prettyJSON = JSON.stringify(data, null, 2); // Pretty printconst newWindow = window.open();
            newWindow.document.write(`<pre>${prettyJSON}</pre>`);
            newWindow.document.close();
        });
  

  This fetches the JSON data, formats it nicely, and displays it in a new window or tab using <pre> tags.

3. Use an External JSON Viewer Tool

• If you frequently need to pretty-print JSON, you can use tools like:
  • jsonviewer.stack.hu
  • jsonformatter.org
  • These tools can take raw JSON data and pretty-print it in a visually appealing manner.
  • Disclaimer: This is a non-Microsoft website. The page appears to be providing accurate and safe information. Watch out for ads on the site that may advertise products frequently classified as PUP (Potentially Unwanted Products). Thoroughly research any product advertised on the site before you decide to download and install it.

Summary:

• The behavior you're seeing is by design and not a bug. To ensure JSON is always pretty-printed when using window.open, either fetch the data and format it programmatically (Solution 2) or let the user manually click a link (Solution 1).

Best Regards,

William.Y | Microsoft Community Support Specialist

Answer 2

Hi William
Thank you for the detailed answer.
I still don't understand why window.open should behave different from a click on a <a href="url" target="_blank">, I would expect the same behaviour for both.
I will create and show the user a link and make him click the link to get the better result. That is okay for me and I have workaround to implement.
I am sure this topic will pop up again in future.
Greetings and happy holidays
Philipp

Answer 3

Hi Philipp,

Thank you for your reply!

In fact, I'm not very dedicated at developing or coding works, from my limited understanding, this may be due to the differences between the JavaScript and HTML languages.

Kindly invite you to click "Yes" below the reply to support our community, so that in the future, other customers with similar doubts can be easier to find the post, and we may have a better chance to investigate further into this question. This will also be an important step in improving our community better!

Wish you a joyful Christmas and a prosperous New Year in advance!

Best Regards,

William.Y | Microsoft Community Support Specialist

Answer 4

Thanks, I implemented the change and and the users are now clicking on a simple link in the javascript/angular UI, if they decide to view the plain JSON data from the WebService and this is working fine. The JSONViewer is opening when clicking a simple link (was not opening when using window.open(...)).
Strange behaviour, thanks for the workaround, this did solve my problem.
Greetings
Philipp