JSFiddle - React, Tailwind, and code Playground

HTML

<div class="json-caption">VALID: run over indexed array</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="[ 1, 2, 3 ]"></div>

<div class="json-caption">VALID: run over valid json-object</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="{ &quot;a&quot;: 1, &quot;b&quot;: 2, &quot;c&quot;: 3 }"></div>

<div class="json-caption">INVALID: run over invalid json-object (because it is a string)</div>
<div class="json-expect error">jQuery throw an error, maybe just ignore?</div>
<div class="json-test" data-json="{ a: 1, b: 2, c: 3 }"></div>

<div class="json-caption">INVALID: run over string cause error</div>
<div class="json-expect error">jQuery throw an error, maybe just ignore?</div>
<div class="json-test" data-json="&quot;string&quot;"></div>

<div class="json-caption">EMPTY/VALID: run over number don't does nothing</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="123456"></div>

<div class="json-caption">EMPTY/VALID: run over number don't does nothing</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="-123456"></div>

<div class="json-caption">EMPTY/VALID: run over boolean don't does nothing</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="false"></div>

<div class="json-caption">EMPTY/VALID: run over boolean don't does nothing</div>
<div class="json-expect">jQuery OK</div>
<div class="json-test" data-json="true"></div>

<div class="json-caption">INVALID: is translated to "undefined", so causes error because it is a string</div>
<div class="json-expect error">jQuery throw an error, maybe just ignore?</div>
<div class="json-test" data-json="undefined"></div>

<div class="json-caption">INVALID: run over undefined causes an error</div>
<div class="json-expect error">jQuery throw an error, maybe just ignore?</div>
<div class="json-test" data-json="undefined" data-json-undefined="true"></div>

<div...

CSS

html, body {
    margin: 0;
    font: 12pt arial, sans-serif;
}
code {
    display: inline-block;
    font: 10pt Consolas;
    background: #E2F5FF;
    border-radius: 4px;
    padding: 4px 10px;
    margin-right: 5px;
    width: 200px;
    text-align: right;
}
code.type {
    background: #FFEFEF;
    width: 60px;
    text-align: left;
}
code.result {
    background: #DFFFE6;
    width: auto;
    text-align: left;
}
code.result.empty {
    background: #F3F3F3;
    color: #B9B9B9;
}
code.result.error {
    background: #FF6E6E;
    color: #5F0000;
    max-width: 280px;
    vertical-align: top;
}
div.json-caption,
div.json-expect {
    display: inline-block;
    font: 9pt Consolas;
    background: #FAFAFA;
    color: #153A69;
    border-radius: 4px;
    padding: 4px 10px;
    width: 590px;
    margin: 10px 7px 0;
}
div.json-expect {
    margin-top: 5px;
    background: #E8FFE2;
    color: #005200;
}
div.json-expect.error {   
    background: #FFE2E2;
    color: #520000;
}
div.json-test {
    margin: 7px;
}

JavaScript

jQuery(".json-test").each(function() {
    var self = jQuery(this),
        self_data = self.data('json');
    
    if(self.data('json-undefined'))
        self_data = undefined;
    
    var code = jQuery("<code />").text(self.attr('data-json')),
        code_type = jQuery("<code class=\"type\" />").text(typeof self_data);
    
    self.append(code);
    self.append(code_type);
    
    try {
        var does_something = false;
        
        jQuery.each(self_data, function(k, v) {
            does_something = true;
            
            var code_result = jQuery("<code class=\"result\" />").text(k + ": " + v);
            self.append(code_result);
        });
        
        if(!does_something) {
            var code_result = jQuery("<code class=\"result empty\" />").text("does nothing");
            self.append(code_result);
        }
    }
    catch(e) {
        var code_result = jQuery("<code class=\"result error\" />").text(e);
        self.append(code_result);
    }
});