使用 jQuery .each() 解析 JSON 数组答案

【问题标题】：Parse JSON array with jQuery .each()使用 jQuery .each() 解析 JSON 数组
【发布时间】：2010-12-03 05:13:59
【问题描述】：

我有这个 jQuery 函数

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();
    }
  });
}

我正在尝试解析这个数组

{
    "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-27pf.jpg",
            "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009-09-27pf.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-06pf_0.jpg",
            "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009-09-06pf_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-30pf_0.jpg",
            "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009-08-30pf_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-26pf.jpg",
            "thumbnail" : "http://journeyon.local/sites/default/files/imagecache/ticker_thumbnail/files/poster-images/Sermon_2009-07-26pf.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" : ""
        } 
    ] 
}

问题是我在 jQuery.js 文件本身上遇到错误。

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

有人知道发生了什么吗？如果我在 .each() 语句之前发出警报，它会发出警报，但如果我在 .each() 语句中发出警报，我什么也得不到，而且变量永远不会被构建。

谢谢！

【问题讨论】：

标签： jquery arrays json parsing each

【解决方案1】：

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

【讨论】：

【解决方案2】：

您使用$.ajax() 是很困难的。改用$.getJSON() 会更容易。

【讨论】：

你这么说很有趣，因为 IE6 根本不喜欢 .getJSON，至少在 .ajax 调用中，IE6 会提示成功。 IE6 从来没有使用 .getJSON 达到“成功” 我为此奋斗了 8 到 10 个小时，然后切换到 .ajax 并立即获得成功警报......现在它只是不会构建列表项。
jQuery 可以很好地使您免受浏览器差异的影响，但如果您编写依赖于浏览器实现细节的代码，它不会让您摆脱困境。仅举一个例子： [1, 2, 3,].length 在所有浏览器上都是 3，除了 IE，它是 4，最后一个元素是“未定义”。我的意思是，如果 $.getJSON() 不起作用，您可能做错了什么。我会在 Firefox 上的 Firebug 和 IE8 上的 F12 下运行你的程序。其中之一可能会在您的代码中标记错误，修复后将允许代码在 IE6 上运行。
好吧，你扭着我的胳膊回去getJSON，它奏效了！我应该再试一次！我最初的问题是一个格式错误的 JSON 数组，Safari 和 Firefox 比 IE 更宽容...在验证该数组后我应该再次尝试 getJSON...

【解决方案3】：

对于一个PHP数组json编码

<?php $arr= array('1'=>'2', 2=>'3',4000=>'400','x'=>'alfa'); ?>

<input type="hidden" value="<?php echo json_econde($arr); ?>" id="phpjsonencoded">

你可以使用

var x = "[" + $('#phpjsonencoded').val() + "]";

var obj = $.parseJSON(x);

$.each(obj[0],function(key,val){

console.log(val);

});

【讨论】：

【解决方案4】：

只需使用row.node-type、row.video 等，而不是使用row['node-type']、row["video"] 等。

希望这会有所帮助。

【讨论】：