emmasax / json-formatter Goto Github PK

View Code? Open in Web Editor NEW

57.0 57.0 25.0 20 KB

Takes JSON and renders it into an HTML list.

Home Page: http://emmasax.github.io/json-formatter/

License: MIT License

CSS 6.53% JavaScript 93.47%

json-formatter's People

Contributors

Stargazers

Watchers

json-formatter's Issues

.toggle click event needs to be "scoped" to its instance's list_id setting

Issue:
.toggle click event needs to be "scoped" to its instance's list_id setting

Description:
If more than one Instance of JSONFormatter is used then the click event gets binded {n} times.
So, if an object is toggled it will close right after it opens.

Code Reference:

json-formatter/JSONFormatter.js

Line 142 in c150340

$('.toggle').next().slideUp().end().text(' + ').on('click', function() {

Reproduce:

touch test.html && vi test.html

<html>
    <head>
        <title>Issue x</title>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <!-- JSONFormatter -->
        <link rel="stylesheet" href="JSONFormatter.css">
        <script type="text/javascript" src="JSONFormatter.js"></script>
    </head>
    <body>
        <div class="code">{"foo": {"foo": "bar"}}</div>
        <div class="code">{"foo": {"foo": "bar"}}</div>
        <div class="code">{"foo": {"foo": "bar"}}</div>
        
        <script type="text/javascript">
            // fancy way to setup code
            var loop = 5;
            var $els = $('.code');
            for (var i = 0; i <= $els.length - 1; i++ ) {
                $el = $els[i];
                var json = JSON.parse($el.innerText);
                var ref = '.code:eq(' + $els.index($el) + ')';
                $(ref).empty();
                JSONFormatter.format(json, {'appendTo': ref, 'collapse': true, 'list_id': 'json_' + i});
            }
        </script>
    </body>
</html>

open test.html

Formatting big json object freezes page

big JSON objects freezes pages.

The demo page doesn't load a file.

The demo page is not working for me it refuses to run the script because its MIME type is plain text

Suggestions and Typo Fix

In the readme, you have this as the options object

{
collapse: false, // Setting to 'true' this will format the JSON into a collapsable/expandable tree
append_to: 'body', // A string of the id, class or element name to append the formatted json
list_id: 'json' // The name of the id at the root ul of the formatted JSON
}

append_to should be appendTo

It also isn't clear that when you say

JSONFormatter.format(json, {});

that json is a javascript object and not a JSON string. Initially, I did this after reading the readme.

var myObj = {"blah":"blah"};
var json = JSON.stringify(myObj);
JSONFormatter.format(json, {});

and of course that didn't work.

The other thing that might be nice is if the formatter would just return a DOM node of what you have produced.

Then I could put it wherever I want.

IE.

var node = JSONFormatter.format(json, {});
myElement.appendChild(node);

emmasax / json-formatter Goto Github PK

json-formatter's People

Contributors

Stargazers

Watchers

Forkers

json-formatter's Issues

.toggle click event needs to be "scoped" to its instance's list_id setting

Formatting big json object freezes page

The demo page doesn't load a file.

Suggestions and Typo Fix

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent