Fails to parse valid json

philmcmahon commented 6 years ago

JSONovich doesn't seem to always work as I would expect - it currently throws a syntax error on this response:

https://content.guardianapis.com/stage/2016/jul/04/katy-brand-teenage-christian-comedy-interview?show-tags=all&api-key=test

It's possible that the guardian content api isn't formatting the json correctly, but other json prettifiers do seem to work with it, so maybe this is something that can be fixed?

Thanks for a super useful add on.

welwood08 commented 6 years ago

JSONovich formatted that URL fine when I loaded it just now. Did you save a copy of the json when there was an error?

philmcmahon commented 6 years ago

Ah, sorry, just discovered this is being caused by another (internal) extension I've got installed called teleporter which injects extra markup into the page. This is what the source of the page looks like with the injected HTML by the extension (it's the <div id="teleporter-wrapper"> at the bottom). So it's not necessarily something that needs fixing in JSONovich. Do you have any idea what the problem could be here? Happy to try and do a PR to fix it if it would be helpful, I guess this might not be the only case where 3rd party extensions mess with JSONovich.

<!DOCTYPE html>
<html>
<head>
    <link href="resource://content-accessible/plaintext.css" rel="alternate stylesheet" title="Wrap Long Lines" type="text/css">
    <style>
    body, .json {
     margin:0;
     padding:0;
    }
    .json {
     font-family:monospace;
     white-space:pre-wrap;
     color:#666;
     display:table;
     counter-reset:line;
    }
    .json .line {
     display:table-row;
     counter-increment:line;
    }
    .json .line:nth-of-type(even) {
     background-color:#fafaff;
    }
    .json .line:nth-of-type(odd) {
     background-color:#fafffa;
    }
    .json .line:hover > .gutter {
     background-color:#eeeebb;
    }
    .json .line:hover > code {
     background-color:#ffffcc;
    }
    .json .gutter, .json code {
     margin:0;
     padding:0;
     display:table-cell;
    }
    .json .gutter {
     text-align:right;
     background-color:#eee;
    }
    .json .foldable {
     cursor:vertical-text;
    }
    .json .foldable.toggled {
     cursor:row-resize;
     background-color:#fa7;
    }
    .json .foldable.toggled > .gutter {
     background-color:#ea8;
    }
    .json .foldable.toggled > code {
     background-color:#fb9;
    }
    .json .foldable.toggled:hover > .gutter {
     background-color:#ecb;
    }
    .json .foldable.toggled:hover > code {
     background-color:#fdc;
    }
    .json .folded.line {
     visibility:collapse;
    }
    .json .foldable .fold.gutter:before {
     content:'-';
    }
    .json .foldable.toggled .fold.gutter:before {
     content:'+';
    }
    .json .foldable.toggled code:first-of-type:after {
     content:' \2026 ';
    }
    .json .number.gutter:before {
     content:counter(line);
    }
    .json code {
     text-align:left;
    }
    .json code .string > .content {
     color:#080;
    }
    .json code .key {
     color:#008;
    }
    .json code .boolean {
     color:#066;
    }
    .json code .number {
     color:#066;
    }
    .json code .null {
     color:#066;
    }
    .json code .delimiter {
     color:#660;
    }
    .json code .key.delimiter {
     position:absolute;
     top:0;
     left:-1000em;
    }
    .json code .separator {
     color:#660;
    }

    @media print {
     .json code .string > .content {
       color:#060;
     }
     .json code .key {
       color:#006;
       font-weight:bold;
     }
     .json code .boolean {
       color:#044;
     }
     .json code .number {
       color:#044;
     }
     .json code .null {
       color:#044;
     }
     .json code .delimiter {
       color:#440;
     }
     .json code .separator {
       color:#440;
     }
    }

    .error {
     background-color:#f46;
     padding:0.5em;
     font-weight:bold;
    }
    </style>
    <title></title>
</head>
<body>
    <div class="error">
        SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 589 of the JSON data
    </div>
    <pre>{"response":{"status":"ok","userTier":"developer","total":1,"content":{"id":"stage/2016/jul/04/katy-brand-teenage-christian-comedy-interview","type":"article","sectionId":"stage","sectionName":"Stage","webPublicationDate":"2016-07-04T06:00:02Z","webTitle":"Katy Brand: 'I was praying demons out of people at 15'","webUrl":"https://www.theguardian.com/stage/2016/jul/04/katy-brand-teenage-christian-comedy-interview","apiUrl":"https://content.guardianapis.com/stage/2016/jul/04/katy-brand-teenage-christian-comedy-interview","isHosted":false,"pillarId":"pillar/arts","pillarName":"Arts"}}}</pre>
    <div id="teleporter-wrapper">
        <div class="gustaf-bar gustaf-bar-teleporter">
            <span class="gustaf-bar__logo">T<span class="gustaf-bar__logo--expanded">eleporter</span></span>
            <div class="gustaf-slider gustaf-slider--loading">
                <span class="teleporter-loading">Loading...</span>
            </div>
        </div>
    </div>
    <script src="moz-extension://76791ba0-7817-2449-aaff-d6cd8a1acfc3/resources/jsonovich.css.js">
    </script>
    <script src="moz-extension://76791ba0-7817-2449-aaff-d6cd8a1acfc3/resources/json2html.js">
    </script>
    <script src="moz-extension://76791ba0-7817-2449-aaff-d6cd8a1acfc3/resources/jsonovich.js">
    </script>
</body>
</html>

welwood08 commented 6 years ago

I see, thanks. Looks like JSONovich is using document.body.textContent to extract the JSON and in this case gets more than it expected. Fix imminent.

philmcmahon commented 6 years ago

Great! Thankyou!

JSONovich / jsonovich

Fails to parse valid json #52