Access JSON-LD with JavaScript

by Adi Jaya

HTML

<!-- for validation JSON => https://jsonlint.com/ -->
<script type="application/ld+json" id="demo">
{
  "title" : "Lorem Ipsum dolor...",
  "description" : "hello",
  "content" : "<p>Lorem Ipsum dolor sit....</p>\n <p style=\"color: purple;\">Lorem <mark>Ipsum</mark>...</p>",
  "label" : [{
    	"name" : "Label 1",
        "url" : "#label-1"
    }, {
    	"name" : "Label 2",
        "url" : "#label-2"    	
    }, {
    	"name" : "Label 3",
        "url" : "#label-3"    	
    }]
}
</script>


<div id="output">Loading...</div>

CSS

body {
    font-family : sans-serif;
}

.body-content {
    padding: 10px;
    border: 1px solid silver;
}

JavaScript

var output = document.getElementById( "output" );
var data = document.getElementById( "demo" ).innerHTML;

var respon = JSON.parse( data );


//sample structure
var temp = "";
	temp += "<h1>"+ respon.title +"</h1>";
	temp += "<p>Description : "+ respon.description +"</p>";
	temp += "<div class='body-content'>"+ respon.content +"</div>";
	
	temp += "<p class='label-container'>";
    
    //loop array => label
	for( var i = 0; i < respon.label.length; i++ ){
      	temp += "<a href='"+ respon.label[i].url +"'>"+ respon.label[i].name +"</a> "+ (i === respon.label.length - 1 ? "" : ",") +" ";
    }
    
	temp += "</p>";



if( output ){
	output.innerHTML = temp;
}