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?

Solution 1

In Chrome use JSONView or Firefox use JSONView

Solution 2

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).

Solution 3

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.

Solution 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?

Solution 5

json-ie.reg. for IE

try this url

http://www.jsonviewer.com/

View more solutions

Comments

[Qpirate]

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

[Umesh Patil]

@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.

[Vodun]

Same for firefox: jsonview.com

[Qpirate]

@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.

[Umesh Patil]

I installed the addon. But it doesn't work for my file - content.dimestore.com/prod/survey_data/4535/4535.json

[Vodun]

Because the server return invalid "Content-Type: application/octet-stream" should be "application/json"

[Umesh Patil]

Where "Content-Type:application/octet-stream" is mentioned ?

[Vodun]

In the http header. You can see it with curl -v content.dimestore.com/prod/survey_data/4535/4535.json

[jmoreno]

possible duplicate of How can I convince IE to simply display application/json rather than offer to download it?

[Manse]

@Umesh addons.mozilla.org/en-US/firefox/addon/jsonview for firefox ... added to answer

[Umesh Patil]

How to use this add on ? I installed, but when I hit the json url. It saves in browser downloads

[Manse]

@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.

[Umesh Patil]

+1. Its cool Wladimir. Are there any other prefixes like view-source for FF ?

[Wladimir Palant]

A bunch of them actually but they are meant for internal use - they aren't usually very useful when used manually.

[Wladimir Palant]

@Umesh: Click "edited ... ago" link to see the change history. I changed the tags - the browser is called Firefox, Mozilla is a company/organization.

[baptx]

@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 stackoverflow.com/questions/9888861/view-json-file-in-browse‌​r/…

[baptx]

+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 stackoverflow.com/questions/9888861/view-json-file-in-browse‌​r/…

[StepUp]

@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.

[codeLover]

Hi, Is it ok to use this way to process rsponse i angular applications?