callumlocke / json-formatter Goto Github PK

I like the UI of this JSON parsing extension the most, but JSONview has one particularly useful feature, the ability to copy the path of any node. It is part of a context menu, and makes writing scripts much easier

Is there a way to add custom extensions to be viewed with the json formatter extension?

$curl -I http://www.qwiki.com/api/v2/channels/p0h5JN.qrl?include_qwiki_id=87Z9c5
HTTP/1.1 200 OK
Cache-Control: max-age=60, public
Content-length: 3034558
Content-Type: application/json; charset=utf-8

renders as text in chrome rather with the json-formatter.

i have install it from web-store. but i don't know how to use it , like a joke ...

The Raw | Parsed toggle buttons scroll up along with the page. Making their position fixed will help a lot. I tried "position:fixed;" in css for the class "optionBar" but then the button click is not functioning.

Couldn't see this mentioned as an issue already.

An error string at the beginning of a response is being ignored and this example formats as valid json, without displaying the string at the top, as it does with hello in jsonp example in readme.

<br />
<b>Notice</b>:  Undefined variable: zero in <b>/path/to/api/error/SomeController.php</b> on line <b>586</b><br />
{"items":[{ "someStuff": 1234 }]}

When this extension is enabled, the server receives two requests instead of one:

Is this how the extension works?

"nid":6001849275902605034 from server,

but get "nid":6001849275902605000 after parsed

Media types can be extended for applications to provide additional validation. If the server responds with
application/json+<anything>, then it is JSON.

I'm working with Nuxeo and it seems to return application/json+esentity or application/json+nxentity which are not recognized as JSON by this plugin.

When dealing with large JSON data structures it can be useful to have everything collapsed so you can expand just the part you are interested in. Otherwise, finding the part can be difficult.

Can you please switch the caret image (currently data:image) to the border hack. It bugs me that the image shows up in the Chrome dev center (network panel).

Let me know if you need a pull request.

Locally, I've been running a patched-up version of json-formatter that does two things:

• Creates links of relative path strings if the key "looks" like it probably names a reference, like {"something_href": "/something"} would create a link. I think this is generally useful for traversing APIs.
• Appends ".json" to such links. This is an absolute hack, but I use json-formatter to walk around a Rails-style API, and it lets me click through related objects. This isn't useful at large, but it'd be cool if I could get the same effect through some sort of feature, be it a heuristic or UI. I'm not sure what that'd look like. (Appending ".json", or "?format=json" is Rails' way of forcing a JSON response without a content negotiation header.)

This isn't a PR because it's just a hack for my use case, but here's the commit, which hasn't been totally cleaned up from past experiments. Any thoughts about functionality like this?

I guess it would be handy if you could make the option bar fixed when viewing the source.

For now I've made the changes directly for me. Let me know if you're considering adding this in future versions.

Nice job btw 👍

Hi,
I'm a client of a service that serves a big JSON (~10MB)
I loaded the page and waited for a few minutes but the extension does not kick in.

besides :
I need to parse a JSON before displaying it, can i somehow use this extension?
maybe provide support for custom intercept function?

thanks!

Parsed
{
"id": 5531888790362115000
}

Raw
{"id":5531888790362115112}

Would be awesome if you could build the object on-screen as the response is streaming in.

That might also change the way you handle too-long parsing: the users gets to click the "show raw" button and parsing could then stop.

Not sure if that's even possible for Chrome Extension, but would be really nice to have that!

On a (non-JSON) page where the body's first child is a child node, a TypeError: Cannot read property 'length' of undefined exception is thrown since the node has no innerText property.

Hey, can you disable (or add an option) for this to sort json arrays by default?

If you have something like this, it should stay in this order.

{
   3: {...},
   1: {...},
   2: {...}
}

For some reason it doesn't work on this url:

http://bitcoincharts.com/t/markets.json

Why?

Hi,

Is it possible to use json-formatter to format a json response but the content type is not set to 'application/json' in the HTTP response?

Parsing 3 Mb json takes 1.3 Gb memory for me. It will be great to see an option like "Do not format jsons more than ... Kb".

For example:
if i have
357285290459264351
it will be presented as
"ID": 357285290459264300

Expected: "ID": 357285290459264351

Can it also 'do mostly the same' for log files that are structured as a list of (newline delimited) json objects?

I can't imagine this will make the regular case buggy, only seems to require adapting the input size limit enforcement code if any. Then it would be both a json viewer and json log viewer. Json log files are pretty standard at least in the node.js realm (default in popular node.js loggers) and they are more useful than text log files.

One way to get that is to turn the input from a sequence of (newline delimited) json objects to a parent json object that includes the original objects as an array of objects. A bit dirty as it needs to add a meaningless top level object name (e.g. named 'multiple objects' or something) but quite harmless. All that before passing on to the same display code.

?

I'm interested in the JSON->HTML part of your extension, to be used separetly.
I browsed the code and I saw the "recursive kvov builder". Is this from any other open source project? What kvov means anyway ?

Such as github...

I get this error:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

The value 139542552519904695 show 139542552519904690 when json-formatter is enabled.

It would be awesome to be able to add ignoring patterns for keys for expanding or rendering.

When dealing with some large JSON (e.g. geometry results) formatting can be a bit sluggish. I'm not sure if one of the slow points is rendering everything initially, which is the default behaviour, is causing this but it would be nice even if it doesn't speed up initial formatting.

I'll be looking into this soon to try to add this feature :)

I know there are a few, but they all lack one stupid simple feature: toggle to disable. It's f*cking retarded that when I view a github raw URL it gets clobbered by the syntax highlighters and thus copy-pasting becomes very detrimental.

when i used the extension, i always want to copy the beautified json source like what jsonmate do.

Would be great to have a page where I can copy and paste JSON in and use this extension to view it.

Thanks for an awesome extension! I would like an option to set default view as "raw" so if I don't want to wait for the parsing and just want to see the raw data on F5 it is possible :)

When I enter the URL of an SVG into Chrome's address bar, I get an JavaScript error from line 218 in content.js, because the SVG document has no body.

This extension is not compatible with the jsonp result that is returned by ExpressJS in NodeJS.
Express returns the following syntax:

/**/ typeof callback === 'function' && callback( ... );

As the source code documents, the /**/ is a specific security mitigation for "Rosetta Flash JSONP abuse". The typeof is for error checking.

I looked at the source but couldn't find an easy solution for PR. I hope you can fix this to make this extension even more useful.

is that actually not working or am I doing something wrong?

I found a bug on this line:
https://github.com/callum85/json-formatter/blob/master/extension/js/content.js#L218
where this extension will fail to activate if the user has other extensions installed that modify the DOM before this extension is run. I'm not sure if the fix involves bumping up the priority of this extension somehow? Or bumping up the order in which the script is run? An example extension that creates the error is: https://chrome.google.com/webstore/detail/hinehgnhgiohbfpbpgkjnelkcgdkcgha?hl=en-US&utm_source=chrome-ntp-launcher

Hello,

so far it worked great, however when I exceeded size of JSON (currently trying to format 5.5MB file), it doesn't try to format it, nor it outputs anything in console of page (opened json) or console of plugin.

Is there any debug I could try? Is there any limit on size of JSON that will plugin attempt to format?
Thanks

When I click buttonPlain or buttonFormatted it keeps focused until I click somewhere else. Adding .blur() on the click functions should solve this behaviour.

Please add an option for C-style object and array braces.

Java-style (current):

{
    "foo" : {
        "bar" : 10
    },
    "lol" : [
        "rofl",
        "lmao"
    ]
}

C-style:

{
    "foo" :
    {
        "bar" : 10
    },
    "lol" :
    [
        "rofl",
        "lmao"
    ]
}

Without needing to copy/paste or open a separate tab.

Usage flow:

1. Navigate to a webpage containing JSON string (text book, presentation, server log file, etc.)
2. Use the mouse to select some text.
3. Right-click to bring up the browser context menu. Similar to AdBlock, there should be a "Format as JSON" item.
4. Select the "Format as JSON" menu item.
5. The extension puts up a bubble (looks like a speech bubble or a dictionary look up bubble, or a tooltip, etc.) on top of the selected text, which renders the pretty-formatted JSON string or any validation errors.

Can you add "persistent": false to "background" in manifest.json to support Event Page?
Just one line to save some memory for low end users.

Try to format a json containing integer like 7254262430694618237, you will see 7254262430694618000 in formatted mode.

It is not working on http://54.249.240.120/qcorner/question/1
and also not working for my localhost. Any suggestion or tip.

For instance, this is done by "The Missing JSON Inspector" Chrome extension, which puts the JSON data in window.$json by default.

I'm willing to take a crack at this, even though I'm not a javascript developer.

I'm testing my API via web and I have a text/plain response where the body is (literally, no headers):

GET /api/user HTTP/1.1
User-Agent: Super ultra fast super HTTP browser
Host: xxxxxx.xx
Accept: */*



HTTP/1.1 200 OK
Date: Sat, 25 Apr 2015 17:52:51 GMT
Content-Length: 62
Content-Type: application/json; charset=utf-8

{"error":"Access denied","zone":"LOGGED_IN","uri":"api\/user"}

And somehow it's formatted into:

{
  "error": "Access denied",
  "zone": "LOGGED_IN",
  "uri": "api/user"
}

Indeed, the response contains some what-looks-like-JSON, but don't just assume and discard the rest!

Just to extra clarify: the first big paste with request header, response header and response body IS the page. They're not the request and response from browser.

When the large long values are coming down, it is rounding and displaying wrong values.

Parse following JSONObject and look at the long values.

{"large_long_a":288536860722989048,"string":"2013-10-30 03:41:10","large_long_b":288517478611921009}

Minor: The link on the chrome://extensions/ points to https://github.com/callum85/json-formatter instead of https://github.com/callumlocke/json-formatter.

I'd love to be able to type data:application/json, <json> into the location bar and get pretty formatted JSON from this plugin.

doesn't format when top level is an unnamed array
[
{
"cnt":1,
"name":"American",
"pk":7
},
{
"cnt":2,
"name":"Celebrities",
"pk":3
},
{
"cnt":1,
"name":"Region",
"pk":9
}
]

I haven't been able to determine the rhyme or reason, but on some URLs the background is black with green text, and sometimes its white with black text ("normal" - I should say).

I'd like to make the white-background-black-text a constant, as the black background is hard to read.

URLs from your readme reproduce this:

Black&Green:

White&Black

Hi!

I like the extension very much, but when I use it for work I have some issues with our object identifiers not being displayed correctly.

Let me show an example; https://plm1.demo.proceranetworks.com/rest/model/objects/subscribers/oid/288230376151714202

The OID we use is 288230376151714202 as shown in the URL, but when I use the extension it is displayed as 288230376151714200

Visit the url with the extension enabled/disabled and watch the oid: part.