Google Chrome display JSON AJAX response as tree and not as a plain text

AjaxJsonGoogle ChromeViewTree

Ajax Problem Overview


I cannot find an answer to this one:

My AJAX calls return JSON data. In Google Chrome Developer Tools > Resources > XHR when I click on the resource on the left and then on the Content tab I see the JSON string as a string and not as a tree as Firebug and Firebug Lite do.

How do I force Chrome to display it as a tree. Is there a Content-type that my PHP file must have???

Ajax Solutions


Solution 1 - Ajax

To see a tree view in recent versions of Chrome:

Navigate to Developer Tools > Network > the given response > Preview

Solution 2 - Ajax

Google Chrome now supports this (Developer Tools > Network > [XHR item in list] Preview).

In addition, you can use a third party tool to format the json content. Here's one that presents a tree view, and here's another that merely formats the text (and does validation).

Solution 3 - Ajax

The correct content-type for JSON data is application/json. I assume that is what you are missing.

Solution 4 - Ajax

You can use Google Chrome Extension: JSONView All formatted json result will be displayed directly on the browser.

Solution 5 - Ajax

I've found the answer:

You MUST encode your json like this: {"c":21001,"m":"p"} but not {c:21001,m:"p"} or {'c':21001,'m':'p'}

Thus, the key of a dict must be wrapped in double quotes:", then chrome will preview it as json rather than plain text.

Solution 6 - Ajax

In order for it to display the JSON message properly it has to have the "application/json" mime type and to be correctly structured.

You can check the structure here

Solution 7 - Ajax

I'm not sure if Chrome has added this feature since the last answer, but I was able to view the json response by...

  • opening developer tools in the browser while on the page with the request
  • submitting the request
  • in developer tools - "Console" tab - click on the "Object" tree under the resource to expand

...I was able to view the response as a readable hierarchy that showed what to ask for and what is returned. (Neither Network or Resources tab had anything helpful that I was able to find.)

Happy requesting!

Solution 8 - Ajax

There was an issue with a build of Google Chrome Dev build 24.0.1312.5 that caused the preview panel to no longer display a json object tree but rather flat text. It should be fixed in the next dev

See more here: http://code.google.com/p/chromium/issues/detail?id=160733

Solution 9 - Ajax

Solution 10 - Ajax

How to get Tree-view

See step by step instructions on how to do this in the below GIF. (I recorded in Chrome - chromium shouldn't be too different.)

Click on the link to enlarge and follow along

How to get the tree view of the response in chrome

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGRbossView Question on Stackoverflow
Solution 1 - AjaxMatt McClureView Answer on Stackoverflow
Solution 2 - AjaxTrevorView Answer on Stackoverflow
Solution 3 - AjaxQuentinView Answer on Stackoverflow
Solution 4 - AjaxQuang VuView Answer on Stackoverflow
Solution 5 - AjaxBingyan LiuView Answer on Stackoverflow
Solution 6 - AjaxMariana B.View Answer on Stackoverflow
Solution 7 - AjaxDeborahView Answer on Stackoverflow
Solution 8 - AjaxJeffBaumgardtView Answer on Stackoverflow
Solution 9 - AjaxlambacckView Answer on Stackoverflow
Solution 10 - AjaxBenKoshyView Answer on Stackoverflow