JSFiddle - React, Tailwind, and code Playground

by marsmoorthi

HTML

<H1>
ADD, REMOVE, EDIT  JSON ELEMENTS 
</H1>

<a href="https://techtothepoint.blogspot.com/">Reference from https://techtothepoint.blogspot.com/</a>

<pre><code>
// Sample json object

  var json ={
    "id": "",
    "entityname": "eset",
    "entitydescription": "",
    "entityTags": [],
    "esetname": "APAIBOT",
    "entityacl": [
        "public"
    ],     
    "fields": {
        "esetname": {
            "name": "esetname",
            "type": "string",
            "default": "",
            "id": "esetname",
            "field_order": 0,
            "entityreference": "",
            "acl": {
                "required": true
            }
        },
        "description": {
            "name": "description",
            "type": "string",
            "default": "",
            "id": "description",
            "field_order": 1,
            "entityreference": "",
            "acl": {
                "required": true
            }
        }  
    }
};
</code></pre>
 
<div id='json'>
test k
</div>

CSS

.qsn{color:red;}
.ans{
  color:blue;
  padding: 20px;
}
#json{
  margin: 15px;
  font-size: 1em;
  

}

JavaScript

var json ={
    "id": "",
    "entityname": "eset",
    "entitydescription": "",
    "entityTags": [],
    "esetname": "APAIBOT",
    "entityacl": [
        "public"
    ],     
    "fields": {
        "esetname": {
            "name": "esetname",
            "type": "string",
            "default": "",
            "id": "esetname",
            "field_order": 0,
            "entityreference": "",
            "acl": {
                "required": true
            }
        },
        "description": {
            "name": "description",
            "type": "string",
            "default": "",
            "id": "description",
            "field_order": 1,
            "entityreference": "",
            "acl": {
                "required": true
            }
        }  
    }
};
var fld = json.fields;
var str = "<span class='qsn' > (var fld) json.fields =" + '<br/><br/><span class="ans" >' +  JSON.stringify(fld ) 
+ '<br/><br/>' + "<span class='qsn' > Object.keys(fld) =  </span>" +  '<br/><br/><span class="ans" >' + Object.keys(fld) + "</span>"
+ '<br/><br/>' + "<span class='qsn' > Object.keys(fld)[0] =</span>" + '<br/><br/><span class="ans" >' + Object.keys(fld)[0] + "</span>"
+ '<br/><br/>' + "<span class='qsn' >fld.esetname = </span>" +  '<br/><br/><span class="ans" >' + JSON.stringify(fld.esetname)  + "</span>"
+ '<br/><br/>' + "<span class='qsn' >fld.esetname.type = </span>" +  '<br/><br/><span class="ans" >' + JSON.stringify(fld.esetname.type) + "</span>"
+ '<br/><br/>' + "<span class='qsn' >fld.esetname['type'] = </span>" +  '<br/><br/><span class="ans" >' + JSON.stringify(fld.esetname["type"]) + "</span>"


/* delete object 
for (x in fld) {
   fld[x]; or x
} */
document.getElementById("json").innerHTML =str;