Parse JSON array with jQuery .each()

Question

I have this jQuery function

function getData(jsonLink){
 $(".scrollable .items").html("<img class='loadGif' src='/sites/all/themes/zen/journeyon/images/ajax-loader.gif' alt='' />");
 $.ajaxSetup({
 url: jsonLink,
 global: false,
 type: "GET"
 });
 $.ajax({
 url: jsonLink,
 success: function(data) {
 var output = "";
 $.each(data['nodes'], function(i,row){
 var linkType = row['node-type'];
 var lowerLinkType = linkType.toLowerCase();
 var videoLink = row["video"];
 var thumbLink = row["thumbnail"];
 var posterLink = row["poster-image"];
 var nodeTitle = row["node-title"];
 var url = row['url-link'];
 if(linkType == "Episode"){
 output+='<li><a class="myRemote '+lowerLinkType+'" href="'+posterLink+'" ref="'+videoLink+'" title="Play '+nodeTitle+'"><img src="'+thumbLink+'" width="123" height="67" alt="Play '+nodeTitle+'" /></a></li>';
 }else if(linkType == "Slide"){
 output+='<li><a class="myRemote '+lowerLinkType+'" href="'+posterLink+'" ref="'+url+'" title="Go To '+nodeTitle+'"><img src="'+thumbLink+'" width="123" height="67" alt="Go To '+nodeTitle+'" /></a></li>';
 }
 });
 $(".scrollable .items").html("").append(output);
 remoteControl();
 }
 });
}

And I am trying to parse out this Array

{
 "nodes": [
 {
 "node-title" : "Slide for Album Post",
 "node-type" : "Slide",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/Web_Graphic2.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Web_Graphic2.jpg",
 "video" : "",
 "audio" : "",
 "url-link" : "http://dev.journeystl.info/current/blogs/josh-dix/latest-worship-ep-have-thine-own-way"
 },
 {
 "node-title" : "Walking In The Light",
 "node-type" : "Episode",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/Sermon_2009年09月27日pf.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009年09月27日pf.jpg",
 "video" : "http://journeyon.local/sites/default/files/video/vodcast/Sermon_2009年09月27日-Vodcast.m4v",
 "audio" : "http://journeyon.local/sites/default/files/audio/Sermon_2009年09月27日-Podcast.mp3",
 "url-link" : ""
 },
 {
 "node-title" : "Test Slide",
 "node-type" : "Slide",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/iStock_000000041926Small.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/iStock_000000041926Small.jpg",
 "video" : "",
 "audio" : "",
 "url-link" : "/node/3960"
 },
 {
 "node-title" : "Finding God at Church",
 "node-type" : "Episode",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/Sermon_2009年09月06日pf_0.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009年09月06日pf_0.jpg",
 "video" : "http://journeyon.local/sites/default/files/video/vodcast/Sermon_2009年09月05日-Vodcast.m4v",
 "audio" : "http://journeyon.local/sites/default/files/audio/Sermon_2009年09月06日-Podcast.mp3",
 "url-link" : ""
 },
 {
 "node-title" : "Finding God in Brokenness",
 "node-type" : "Episode",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/Sermon_2009年08月30日pf_0.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009年08月30日pf_0.jpg",
 "video" : "http://journeyon.local/sites/default/files/video/vodcast/Sermon_2009年08月30日-Vodcast.m4v",
 "audio" : "http://journeyon.local/sites/default/files/audio/Sermon_2009年08月30日-Podcast.mp3",
 "url-link" : ""
 },
 {
 "node-title" : "False Teachers",
 "node-type" : "Episode",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/Sermon_2009年07月26日pf.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009年07月26日pf.jpg",
 "video" : "http://journeyon.local/sites/default/files/video/vodcast/Sermon_2009年07月25日-Vodcast.m4v",
 "audio" : "http://journeyon.local/sites/default/files/audio/Sermon_2009年07月25日_Podcast.mp3",
 "url-link" : ""
 },
 {
 "node-title" : "Confessions: A Story of Struggle, Restoration, and Hope",
 "node-type" : "Episode",
 "poster-image" : "http://journeyon.local/sites/default/files/imagecache/ticker_image/files/poster-images/PosterFrame_Confessions.jpg",
 "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/PosterFrame_Confessions.jpg",
 "video" : "http://journeyon.local/sites/default/files/video/vodcast/Sermon_2009年06月28日-Vodcast.m4v",
 "audio" : "http://journeyon.local/sites/default/files/audio/Sermon_2009年06月28日-Podcast.mp3",
 "url-link" : ""
 } 
 ] 
} 

Problem is I am getting an error on the jQuery.js file itself.

G is undefined
http://journeyon.local/sites/all/themes/zen/journeyon/js/jquery-1.3.2.min.js?4
Line 12

Anyone have any clue what's going on? if I alert before the .each() statement it alerts just fine, but if I alert inside the .each() statement I get nothing and the variables never get built.

Thanks!

Answer 1

$.ajax({
 url: jsonLink,
 dataType: 'json',
 success: function(data) {
 $.each(data.items, function(i,item){
 // your code ..
 });
 }
});

Answer 2

You're doing it the hard way by using $.ajax(). It's easier to use $.getJSON() instead.

• elDeuce: Funny you say that, because IE6 didn't like .getJSON at all, at least with the .ajax call IE6 is alerting in the success. IE6 never hit "success" with .getJSON I fought with that for 8-10 hours, before switching to .ajax and getting a success alert right away... now it just won't build the list items.
• Warren Young: jQuery does a good job of insulating you from browser differences, but it won't save you from yourself if you write code that relies on browser implementation details. Just for one example: [1, 2, 3,].length is 3 on all browsers but IE, where it's 4, the last element being "undefined". My point is, you're probably doing something wrong if $.getJSON() isn't working. I would run your program under Firebug on Firefox and the F12 stuff on IE8. One of these is likely to flag an error in your code, which when fixed, will then allow the code to run on IE6.
• elDeuce: Well, you twisted my arm to go back to getJSON and it worked! I should have tried it again! My original issue was a malformed JSON array that Safari and Firefox were a little more forgiving about than IE was being... after validating that array I should have tried getJSON again...

Answer 3

For a PHP array json encoded

<?php $arr= array('1'=>'2', 2=>'3',4000=>'400','x'=>'alfa'); ?>
<input type="hidden" value="<?php echo json_econde($arr); ?>" id="phpjsonencoded">

you can use

var x = "[" + $('#phpjsonencoded').val() + "]";
var obj = $.parseJSON(x);
$.each(obj[0],function(key,val){
console.log(val);
});

Answer 4

Just use row.node-type, row.video etc instead of using row['node-type'], row["video"] etc.

Hope this will help.