Simple JQuery JSON Parsing

Parsing JSON menggunakan JQuery sangat mudah, mungkin ini adalah artikel ke-sekian juta dari artikel yang membahasanya, hehe. Tetapi sayang juga kalau beberapa code waktu belajar tidak dishare, siapa tahu bermanfaat di kemudian hari. Pengalaman laptop hilang itu menyesakkan sebaiknya memang ilmu itu dishare. :)

Hasil tampilan di browser adalah sebagai berikut:

View : JQuery JSON Parsing

View : JQuery JSON Parsing

HTML file : test_parsing_json.html

<html>
	<header>
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script src="js/test_parsing_json.js"></script>
	</header>
<body>
	<div id="results">Loading...</div>
</body>
</html>

Continue reading

Contoh Penggunaan JQuery dan Handlebars

Handlebars adalah semantik template, sangat membantu untuk menambah performance dan fitur dari JQuery. Untuk selengkapnya mengenai Handlebar klik INI.

Untuk contoh saat ini yang dibahas adalah menampilkan data JSON dengan menggunakan Handlebars. Langsung saja untuk contoh pertama adalah menampilkan JSON langsung dari function javascript.

Source Code bisa Download di : example-code-handlebar

Untuk tingkatan / level direktori keseluruhan project  adalah sebagai berikut :

C:.
│   test.html
│   test_ajax.html
│
└───js
    │   test.js
    │   test_ajax.js
    │
    └───data
            users.json

File : test.html
Adalah file template

    
<!doctype html>
<html>
    <head>
	<title>Test Handlebar</title>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
	<h1>Simple load Data from object</h1>
	<div id="results"></div>
        <script id="some-template" type="text/x-handlebars-template">
          <table>
            <thead>
              <th>Username</th>
              <th>Real Name</th>
              <th>Email</th>
            </thead>
            <tbody>
              {{#users}}
                <tr>
                  <td>{{username}}</td>
                  <td>{{firstName}} {{lastName}}</td>
                  <td>{{email}}</td>
                </tr>
              {{/users}}
            </tbody>
          </table>
        </script>
        <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.1.js"></script>
	<script src="js/test.js"></script>
    </body>
</html>

 

File : test.js
Code Javascript untuk menampilkan pada template di atas.

$(document).ready(function(){
	var source = $("#some-template").html();
	var template = Handlebars.compile(source);
	var rsPlaceHolder = document.getElementById('results');
	var data = { users : [ 	
		{username: "agus.rochmad", firstName: "Agus", lastName: "Rochmad", email: "agus.rochmad@hotmail.com" },
		{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" }
	]};

	$('#results').html(template(data));
});

Untuk menampilkan dengan menggunakan AJAX atau getJSON(JQuery), dengan menggunakan template yang sama, code javascriptnya adalah sebagai berikut:

File : test_ajax.js

$(document).ready(function(){
    var source = $('#some-template').html();	
	var template = Handlebars.compile(source);
	var rsPlaceHolder = $('#results');
	
	var getJson = $.getJSON( "js/data/users.json",function(data){
		rsPlaceHolder.html(template(data));
    });
			
});

Good luck