jQuery.each(JSON)

How to use jQuery.each() function to go over json elements one at a time.

jquery-each-json

 Check HMKCode jQuery Tutorial

Objective:

  • How to use jQuery.each() to go over JSON elements?

Environment & Tools:

  • Browser (FF, Chrome or IE)

Library:

  • jQuery 1.9

 

( 1 ) JSON Data

// JSON Data
	var articles = [
		{ 
			"title":"jQuery.each(JSON)",
			"url":"http://hmkcode.com/jquery-each-json/",
			"categories":["jQuery"],
			"tags":["jquery","json","$.each"]
		},
		{
			"title":" Java Servlet Send & Receive JSON Using jQuery.ajax() ",
			"url":"http://hmkcode.com/java-servlet-send-receive-json-using-jquery-ajax/",
			"categories":["Java"],
			"tags":["java","json","jquery"]
		}
	];

( 2 ) jQuery.each(json)

We can go over each element of the passed json as following

$.each(articles, function (index, article) {
   //do something with article...	
}

( 3 ) Complete Example

We will go over the JSON data using $.each() and display each element in a row. Final output will be as following:

  • index.html
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Java Servlet JSON</title>
		<script src="js/jquery.1.9.1.min.js"></script>
		<!-- bootstrap just to have good looking page -->
		<link href="bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
		<!-- we code these -->
		<script src="js/myfunctions.js"></script>
	</head>

	<body>
		<h1 style="text-align:center">jQuery - Parse JSON <br></h1> 
		<p>
			<button class="btn btn-primary" type="button" onclick="show()">Show</button>
		</p>

		<!-- display all articles -->
		<div style="width:700px;padding:20px;S">
			<h5 style="text-align:center"><i style="color:#ccc"><small>Articles</small></i></h5>

			<table id="added-articles" class="table">
				<tr>
					<th>Title</th>
					<th>Categories</th>
					<th>Tags</th>
				</tr>
			</table>
		</div>
	</body> 
</html>

myfunctions.js

function show() {

	// JSON Data
	var articles = [
		{ 
			"title":"jQuery.each(JSON)",
			"url":"http://hmkcode.com/jquery-each-json/",
			"categories":["jQuery"],
			"tags":["jquery","json","$.each"]
		},
		{
			"title":" Java Servlet Send & Receive JSON Using jQuery.ajax() ",
			"url":"http://hmkcode.com/java-servlet-send-receive-json-using-jquery-ajax/",
			"categories":["Java"],
			"tags":["java","json","jquery"]
		}
	];

	// 1. remove all existing rows
	$("tr:has(td)").remove();

	// 2. get each article
	$.each(articles, function (index, article) {

		// 2.2 Create table column for categories
		var td_categories = $("<td/>");

		// 2.3 get each category of this article
		$.each(article.categories, function (i, category) {
			var span = $("<span class='label label-info' style='margin:4px;padding:4px' />");
			span.text(category);
			td_categories.append(span);
		});

		// 2.4 Create table column for tags
	   var td_tags = $("<td/>");

		// 2.5 get each tag of this article		
		$.each(article.tags, function (i, tag) {
			var span = $("<span class='label' style='margin:4px;padding:4px' />");
			span.text(tag);
			td_tags.append(span);
		});

		// 2.6 Create a new row and append 3 columns (title+url, categories, tags)
		$("#added-articles").append($('<tr/>')
				.append($('<td/>').html("<a href='"+article.url+"'>"+article.title+"</a>"))
				.append(td_categories)
				.append(td_tags)
		);	
	});      		
}

Source Code @ GitHub