Believe me that the javascript libraries available for user have helped speed up the work to great extent, and they are browser independent.
Every time i wrote a javascript code i have to check whether its working on different browsers or not, but thses libraries came and saved me from doing all those difficult work.
Here i had a requirement of parsing a JSON with jQuery for my project, i had no idea whatsoever about doing this, but ultimately this article saved me, i really thank him for the code. Here i will tell you people how to do that.
Here is the JSON object that we will be parsing.
{attributes:[{title: "Project Delivered", post_id: 31, post_type_id: 5, parent_post_id: null, description: "Working", time_zone: "International Date Line West", user_id: 4, image_path: "http://localhost:3000/user/image_path/4/thumb/3.jpg", user_name: "TestUser1", created_at: "Thu Mar 27 04:29:33 UTC 2008", email: "testuser1@testurl.com"},{title: "Task Response", post_id: 45, post_type_id: 6, parent_post_id: null, description: "completed", time_zone: "International Date Line West", user_id: 3, image_path: "http://localhost:3000/user/image_path/3/thumb/2.jpg", user_name: "TestUser2", created_at: "Fri Mar 28 06:13:49 UTC 2008", email: "testuser2@testurl.com"},{title: "abhijats post", post_id: 58, post_type_id: 1, parent_post_id: 55, description: "", time_zone: "International Date Line West", user_id: 2, image_path: "http://localhost:3000/user/image_path/2/thumb/9.jpg", user_name: "TestUser3", created_at: "Fri Mar 28 11:37:16 UTC 2008", email: "testuser3@testurl.com"},{title: "Give demo", post_id: 41, post_type_id: 4, parent_post_id: null, description: "\074strong\076Give demo\074/strong\076", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 06:04:02 UTC 2008", email: "testuser4@testurl.com"},{title: "Status Update", post_id: 37, post_type_id: 5, parent_post_id: null, description: "Working", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 05:20:37 UTC 2008", email: "testuser4@testurl.com"},
{title: "abhijat has read acess", post_id: 57, post_type_id: 1, parent_post_id: 55, description: "", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "AbhilashKumar", created_at: "Fri Mar 28 11:16:50 UTC 2008", email: "testuser4@testurl.com"},
{title: "Inxero", post_id: 48, post_type_id: 2, parent_post_id: null, description: "Inxero", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 06:56:28 UTC 2008", email: "testuser4@testurl.com"},
{title: "New public porjet", post_id: 50, post_type_id: 2, parent_post_id: null, description: "", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 10:30:04 UTC 2008", email: "testuser4@testurl.com"},
{title: "Status Update", post_id: 35, post_type_id: 5, parent_post_id: null, description: "Hey the stuff is coming good", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 01:50:48 UTC 2008", email: "testuser4@testurl.com"},
{title: "Status Update", post_id: 36, post_type_id: 5, parent_post_id: null, description: "kljklkl", time_zone: "Paris", user_id: 1, image_path: "http://localhost:3000/user/image_path/1/thumb/mazewallpaperv2.jpg", user_name: "TestUser4", created_at: "Fri Mar 28 01:59:08 UTC 2008", email: "testuser4@testurl.com"}]}
Here is the JSON parser that will parse the JSON object.
this parser uses $.getJSON() method, with a call to the JSON object file, and a function to pass the data through for parsing.The common $.each() method in jQuery can be used to traverse the “nodes” (keys) that you indicate.
$(function(url) {
$.getJSON("jsonObj.js", function(json) {
/* Parse JSON objects */
jJSON["title"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.attributes,function(i,item) {
if (item.title != "undefined" && item.title != "") {
response.count++;
response.values[i] = item.title;
}
});
return response;
})();
jJSON["email"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.attributes,function(i,item) {
if (item.email != "undefined") {
response.count++;
response.values[i] = item.email;
}
});
return response;
})();
jJSON["created_at"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.attributes,function(i,item) {
if (item.created_at != "undefined") {
response.count++;
response.values[i] = item.created_at;
}
});
return response;
})();
jJSON["image_path"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.attributes,function(i,item) {
if (item.image_path != "undefined") {
response.count++;
response.values[i] = item.image_path;
}
});
return response;
})();
jJSON["project_name"] = (function() {
response = {
values: [],
count: 0
};
$.each(json.attributes,function(i,item) {
if (item.image_path != "undefined") {
response.count++;
response.values[i] = item.project_name;
}
});
return response;
})();
/* Function to show data sreams */
displaySocialStream = function() {
var displayDiv = $('#post_wrapper');
var dumpP;
var str = '';
for(strmCntr =0; strmCntr < (jJSON["title"]["values"].length - 1); strmCntr++){
if(strmCntr/2 == 0)
{
postClass = "post";
}else{
postClass = "post alternate-post";
}
str = str + '<div class="' + postClass + '"><div class="avatar"><img src="' + jJSON["image_path"]["values"][strmCntr] + '" class="avatar-image"/></div><div class="post-content"><b>Created At:</b> ' + jJSON["created_at"]["values"][strmCntr] + '<br /> <b>Project Name:</b>' + jJSON["project_name"]["values"][strmCntr] + '<br /> <b>Post Title:</b> ' + jJSON["title"]["values"][strmCntr] + '<br /> <b>Email:</b> <a href="mailto:' + jJSON["email"]["values"][strmCntr] + '">' + jJSON["email"]["values"][strmCntr] + '</a></div></div>';
}
displayDiv.prepend(str);
};
displaySocialStream();
});
}
)
At first glance it seems I could have refined each reference to a self-invoking function into a single function call. However, you must consider that grabbing data from XML is quite different than grabbing data from JSON. While there is still a parent/child relationship, a child in JSON could be a different type, like an array. There might be several arrays throughout the structure. Simply using the dot operator becomes impossible, and getting different keys can be a unique process.
Each key in jJSON references another hash object with two keys, called values and count. Accessing values will return an array of values, and count will tell you how many of that particular reference exists. For example, how many “title”or “email” key references were obtained from the JSON.
var jJSON = {
getValues: function(obj,num) {
return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num));
},
getCount: function(obj) {
return jJSON[obj]["count"];
},
getRandomValues: function(obj,num) {
var a = [];
var b = jJSON[obj]["values"];
var c = b.length;
if (num != null && num < c) {
c = num;
}
for (i = 0; i < c; i++) {
var e = Math.floor(Math.random() * b.length);
a[i] = b[e];
b.splice(e,1);
}
return a;
}
};Along with the key references added to the jJSON object, there are three helper methods. The getValues method will return a number of values for a given object key as an array. If you pass in null as the second parameter, you will receive all values. The getCount method will return a count for a given object key. Finally, the getRandomValues will return a number of randomized values for a given object key.
