Visualizzare JSON in formato HTML con JSON Presenter

Mattepuffo's logo
Visualizzare JSON in formato HTML con JSON Presenter

Visualizzare JSON in formato HTML con JSON Presenter

Programmazione, Javascript - AJAX

JSON Presenter è un plugin per jQuery che ci permette di visualizzare dati JSON in HTML senza troppi sforzi.

Quello che dovete includere sono jQuery, il plugin Javascript e un file CSS.

Questo un esempio completo, ripreso dalla pagina di demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JSON TO HTML</title>
        <link rel="stylesheet" href="jquery.jsonPresenter.css">
        <script src="//code.jquery.com/jquery.min.js"></script>
        <script src="jquery.jsonPresenter.js"></script>
    </head>
    <body>
        <div id="demo-container" class="container">
            <h3>Input</h3>
            <textarea id="json-input">{"hi":"there","list":
                         ["x","y",true,"z", 4, 8, 15, 16, 23, 42],
                         "associativeArray":{"a":4,"c":8,"e11":17,"anotherArray":
                          [{"somethingElse":{"hi":"there"}},3,5,8]}}
            </textarea>
            <button id="execute" class="btn btn-warning">Execute</button>
            <p class="error hidden">JSON non valido</p>
            <div id="output-container" class="hidden">
                <h3>Output</h3>
                <div id="json-container"></div>
                <div class="demo-options">
                    <button id="expand-all">Expand All</button>
                    <button id="collapse-all">Collapse All</button>
                    <button id="expand-levels">Expand Levels</button>
                    Levels: <input type="text" id="levels" value="1">
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var jsonContainer = $('#json-container');
                $('#execute').on('click', function () {
                    var error = false;
                    try {
                        var json = JSON.parse($('#json-input').val());
                    } catch (e) {
                        error = true;
                    }

                    $('.error').toggleClass('hidden', !error);
                    $('#output-container').toggleClass('hidden', error);

                    jsonContainer
                            .jsonPresenter('destroy')
                            .jsonPresenter({
                                json: json
                            })
                            .jsonPresenter('expand', 0);
                });

                $('#expand-all').on('click', function () {
                    jsonContainer.jsonPresenter('expandAll');
                });

                $('#collapse-all').on('click', function () {
                    jsonContainer.jsonPresenter('collapseAll');
                });

                $('#expand-levels').on('click', function () {
                    var levels = parseInt($('#levels').val());
                    jsonContainer.jsonPresenter('expand', levels);
                });
            });
        </script>
    </body>
</html>

Come vedete è abbastanza semplice, e potete modificare la pagina come vi serve, a prescindere dal formato JSON.

L'importante è che si un JSON valido!

Enjoy!

Condividi

Commentami!