View JSON file in Browser

Question

It is not a programming question, but need your views in few words.

When we hit the JSON url in Broswer, it asks us to save the file. Why this happens ? Is there any way to view it on the page itself ? Is there any addon available to view JSON file in browser?

I presume it is IE you are using, if you use Chrome it will show on the page. but if you change the Content-Type: text/html; charset=utf-8 it should allow you to view it in page — Qpirate, Mar 27 '12 at 11:43
@Qpirate Content-Type of ideal JSON file is always json. It can't be text/html. Do you have any solution for Firefox/IE? Vodun solved it for chrome. — Umesh Patil, Mar 27 '12 at 11:46
@Umesh Sorry my thoughts on wanting to see the json returned was so you could debug the response, hence changing the response type. i dont try to view my JSON being returned in the browser mostly i just use fiddler to see what is being returned. sorry. — Qpirate, Mar 27 '12 at 11:52
I installed the addon. But it doesn't work for my file - http://content.dimestore.com/prod/survey_data/4535/4535.json — Umesh Patil, Mar 27 '12 at 11:52
Because the server return invalid "Content-Type: application/octet-stream" should be "application/json" — Vodun, Mar 27 '12 at 11:58
Where "Content-Type:application/octet-stream" is mentioned ? — Umesh Patil, Mar 27 '12 at 12:08
In the http header. You can see it with curl -v content.dimestore.com/prod/survey_data/4535/4535.json — Vodun, Mar 27 '12 at 15:24
possible duplicate of [How can I convince IE to simply display application/json rather than offer to download it?](http://stackoverflow.com/questions/2483771/how-can-i-convince-ie-to-simply-display-application-json-rather-than-offer-to-do) — jmoreno, Sep 30 '15 at 00:02

score 47 · Accepted Answer · edited Mar 27 '12 at 11:53

47

In Chrome use JSONView or Firefox use JSONView

edited Mar 27 '12 at 11:53

Manse

37,765
10
83
108

answered Mar 27 '12 at 11:42

Vodun

1,377
1
10
12

@Umesh https://addons.mozilla.org/en-US/firefox/addon/jsonview/ for firefox ... added to answer – Manse Mar 27 '12 at 11:53
How to use this add on ? I installed, but when I hit the json url. It saves in browser downloads – Umesh Patil Mar 27 '12 at 11:53
@Umesh read the help on the plugin page ----> Normally when encountering a JSON document (content type "application/json"), Firefox simply prompts you to download the file. With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed. Even if the JSON document contains errors, JSONView will still show the raw text. – Manse Mar 27 '12 at 11:54
@ManseUK @Umesh Firefox will still prompt you to download the file if there is a `Content-Disposition: attachment` response header, even with JSONView. I have added an answer to also view these JSON files in browser https://stackoverflow.com/questions/9888861/view-json-file-in-browser/32157007#32157007 – baptx Aug 22 '15 at 14:10
@UmeshPatil In Chrome you should just right click by mouse and choose "Open in new tab" at the method which returns JSON data from "Network" -> "XHR" tab of Chrome browser. – StepUp Jul 24 '17 at 06:29
Hi, Is it ok to use this way to process rsponse i angular applications? – codeLover Aug 25 '20 at 12:56

Wladimir Palant · Answer 2 · 2012-03-27T12:10:20.493

22

If you don't want to install extensions, you can simply prepend the URL with view-source:, e.g. view-source:http://content.dimestore.com/prod/survey_data/4535/4535.json. This usually works in Firefox and Chrome (will still offer to download the file however if Content-Disposition: attachment header is present).

edited Mar 27 '12 at 12:10

answered Mar 27 '12 at 12:02

Wladimir Palant

56,865
12
98
126

+1. Its cool Wladimir. Are there any other prefixes like view-source for FF ? – Umesh Patil Mar 27 '12 at 13:19
A bunch of them actually but they are meant for internal use - they aren't usually very useful when used manually. – Wladimir Palant Mar 27 '12 at 14:15
1

@Umesh: Click "edited ... ago" link to see the change history. I changed the tags - the browser is called Firefox, Mozilla is a company/organization. – Wladimir Palant Mar 27 '12 at 16:44
+1 for `view-source:` workaround. But this will not allow you to see the JSON file formatted in your browser with JSONView addon. And if you want to force the browser to open a file with `Content-Disposition: attachment` response header, you can remove it with moz-rewrite Firefox addon https://stackoverflow.com/questions/9888861/view-json-file-in-browser/32157007#32157007 – baptx Aug 22 '15 at 14:15

score 7 · Answer 3 · answered Nov 03 '15 at 16:59

In Chrome, use JSONView to view formatted JSON.

To view "local" *.json files: - after install You must open the Extensions option from Window menu. - Check box next to "Allow Access to File URLs" - note that save is automatic (i.e. no explicit save necessary)

Re-open the *.json file and it should be formatted.

score 4 · Answer 4 · edited May 23 '17 at 10:31

4

Firefox 44 includes a built-in JSON viewer (no add-ons required). The feature is turned off by default, so turn on devtools.jsonview.enabled: How can you disable the new JSON Viewer/Reader in Firefox Developer Edition?

edited May 23 '17 at 10:31

Community

1
1

answered Feb 28 '16 at 02:34

slothbear

2,016
3
21
38

score 2 · Answer 5 · answered Mar 27 '12 at 11:52

2

json-ie.reg. for IE

try this url

http://www.jsonviewer.com/

answered Mar 27 '12 at 11:52

Javascript Coder

5,691
8
52
98

score 1 · Answer 6 · answered Feb 14 '13 at 14:20

Well I was searching view json file in WebBrowser in my Desktop app, when I try in IE still same problem IE was also prompt to download the file. Luckily after too much search I find the solution for it.

You need to : Open Notepad and paste the following:

    [HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/json]
    "CLSID"="{25336920-03F9-11cf-8FD0-00AA00686F13}"
    "Encoding"=hex:08,00,00,00

Save document as Json.reg and then right click on file and run as administrator.

After this You can view json file in IE and you Desktop WebBrowser enjoy :)

Jinx Dojo · Answer 7 · 2014-01-04T08:06:30.067

For Firefox's Bookmarks JSON files, use this excellent Bookmarklet:

javascript:(function(){var E=document.getElementsByTagName('PRE')[0],T=E.innerHTML,i=0,r1,r2;t=new Array();while(/("uri":"([^"]*)")/g.exec(T)){r1=RegExp.$1;r2=RegExp.$2;if(/^https?:/.exec(r2)){t[i++]='['+(i)+']:<a href='+r2+'>'+r2+'<\/a>';}}with(window.open().document){for(i=0;t[i];i++)write(t[i]+'<br>');close();}})();

Source: "alterna" from forums.Mozillazine.org: http://forums.mozillazine.org/viewtopic.php?p=5551705#p5551705

score 0 · Answer 8 · answered Aug 22 '15 at 14:03

If there is a Content-Disposition: attachment reponse header, Firefox will ask you to save the file, even if you have JSONView installed to format JSON.

To bypass this problem, I removed the header ("Content-Disposition" : null) with moz-rewrite Firefox addon that allows you to modify request and response headers https://addons.mozilla.org/en-US/firefox/addon/moz-rewrite-js/

An example of JSON file served with this header is the Twitter API (it looks like they added it recently). If you want to try this JSON file, I have a script to access Twitter API in browser: https://gist.github.com/baptx/ffb268758cd4731784e3

score 0 · Answer 9 · answered May 06 '19 at 11:59

I would also recommend to use Notepad++ with json-view extension. You get the extension here: https://sourceforge.net/projects/nppjsonviewer/ Install and restart Notepad++. Then open json-file in Notepad and go to "extensions -> Json-Viewer - > Format JSON. Then you habe the hierarchical view of json.

You can also use one of the online-viewers (http://jsonviewer.stack.hu/ , https://jsoneditoronline.org/) which look nice, but I wouldn't recommend this if your data are sensitive in terms of privacy.

score 0 · Answer 10 · answered Jul 23 '20 at 02:17

For Safari 12 and later, you can try the JSONBeautifier bookmarklet. Also works with other browsers.

I created this because JSON Formatter for Safari stopped working in Safari 12. There are a few new options for Safari 12, but I didn't find an open source one in the App Store, and I do not trust closed source browser extensions.

This can be used as a bookmarklet or the source, json-beautifier.js, can be copied and pasted into the browser console. The code is freely available for review and is less than 100 lines of code including comments. Runs entirely on your device and never sends your data over a network.

Works with local files too.

score 0 · Answer 11 · answered May 06 '22 at 04:39

0

Try this one Chrome extension https://chrome.google.com/webstore/detail/json-%3E-table/pjdecdkdljmchigbkalnblidepkeojda

Just install and open URL in browser

answered May 06 '22 at 04:39

akaJes

3
3

Nazir Rizwan · Answer 12 · 2023-02-25T10:40:10.253

0

Microsoft Edge Browser

Json format easily view this but you have some changes in browser.

Browser setting
Go to browser edge://flags/

Search Json viewer

Change "Default to Enabled"

Restart Browser

[Done changes]

Chrome Browser

Install Extension Json viewer

Then view this pure json and change setting also

edited Feb 25 '23 at 10:40

answered Feb 25 '23 at 10:31

Nazir Rizwan

11
3

score 0 · Answer 13 · answered Mar 27 '12 at 12:49

0

I have the Content-Type of my JSON-printing CGIs set to text/javascript.

Works fine for both displaying in browser (e.g. Firefox) and processing in script.

Of course there's no syntax-highlighting in this case.

answered Mar 27 '12 at 12:49

Michael Sandino

1,818
1
13
10

score -2 · Answer 14 · answered Apr 04 '13 at 12:33

-2

Right click on JSON file, select open, navigate to program you want open with(notepad). Consecutive opens automatically use notepad.

answered Apr 04 '13 at 12:33

Justin

1

View JSON file in Browser

14 Answers14

Json format easily view this but you have some changes in browser.

Linked