在多返回的数据结构中访问JSON对象

Question

如何编写下面的成功回调函数以便能够访问下面返回的JSON中的对象。显然，我将无法再使用success: function(data) {if (data.returned === true) {访问返回的对象。我怎么做到这一点？

jQuery代码：

$("#projects").click(function() { 
       jQuery.ajax({ type: "POST", dataType: "JSON", 
        url: "<?=base_url()?>index.php/home/projectsSlider", 
        json: {returned: true}, success: function(data) { 
         if (data.returned === true) { 
          $("#resultProjects").html(JSON.stringify(data.Projects)); 
          $("#resultScreenshots").html(JSON.stringify(data.Screenshots)); 

          $("#content").fadeOut(150, function() { 
           $(this).replaceWith(projectsSlider(data.projectId, data.projectName, data.startDate, data.finishedDate, data.projectDesc, data.createdFor, data.contributors, data.screenshotURI, data.websiteURL), function() { 
            $(this).fadeIn(150); 
           }); 
          }); 
         } 
        } 
       }); 
      }); 

返回的JSON：

{ 
    "Projects": [ 
     { 
      "projectId": "932713684f9073189ec7b", 
      "projectName": "Cloud859Collective", 
      "startDate": "April 19th, 2012", 
      "finishedDate": "April 25th, 2012", 
      "createdFor": "ClasskCreations", 
      "contributors": "Mike Grigsby", 
      "projectDesc": "This website was created with a friend in mind. His name is Kevin Johnson and he is a rapper. He needed a website that would allow him to host and share his music." 
     }, 
     { 
      "projectId": "10599012654f907093714e9", 
      "projectName": "Nurbell Studio", 
      "startDate": "April 15th, 2012", 
      "finishedDate": "April 19th, 2012", 
      "createdFor": "Nurbell LLC", 
      "contributors": "Mike Grigsby", 
      "projectDesc": "This is the page you are currently looking at. This is the official Nurbell homepage. Complete with a frontend and a backend." 
     } 
    ], 
    "Screenshots": [ 
     { 
      "screenshotURI": "http://nurbell.com/vd/1.0/images/project-data/kevo.png" 
     }, 
     { 
      "screenshotURI": "http://nurbell.com/vd/1.0/images/project-data/nurbell.png" 
     } 
    ] 
} 

Answer 1

我不知道你问这里。我认为你应该看看JavaScript的命名空间。这样你可以在你的对象（或命名空间）中创建一个属性，并将json结果放入该属性中。

是这样的：

var myProjects = { 
    projects: null, 

    getProjects: function() { 
      // do the ajax thing with something like 
      myProjects.projects = data.projects; 
    }, 

    placeProjects: function() { 
      if (myProjects.projects == null) myProjects.getProjects(); 
      $.each(myProjects.projects, function(i,e){ 
       //place project content 
      } 
    }, 
} 

// define the click event 
$("#projects").click(myProjects.placeProjects()); 

的数据将被保存，直到被删除或重新加载页面。你可以在你的萤火虫DOM检查器中看到这个对象。希望帮助

编辑：

我实现了这个想法在此的jsfiddle http://jsfiddle.net/BTbJu/5 运行它，点击文字的int事业部加载的第一个项目。继续点击旋转。

Answer 2

不知道我理解正确的问题，但似乎你很担心自己的原始JSON可能会被永久修改，当你调用JSON .stringify。

不，JSON.Stringify将返回一个新的字符串。您的原始json，由闭包参数'data'引用，将保持不变。您将通过数据引用很好地访问所有属性。

事实上，它是data.projectId将在闭合范围内是错误的，并且应该评估为undefined。

试试这个：

$("#projects").click(function() { 
    jQuery.ajax({ 
     type: "POST", 
     dataType: "JSON", 
     url: "<?=base_url()?>index.php/home/projectsSlider", 
     success: function (data) { 
      var projects = data.Projects; //array 
      var screenshots = data.Screenshots; //array 

      //direct, one-off indexed 
      console.log(projects[0].projectId); 
      console.log(data.Projects[0].projectId); 

      //looped with map 
      projects.map(function(project, index) { 
       console.log(project.projectId); 
      }); 

      //traditional for 
      for(var i1 = 0; i1 < projects.length; i1++) { 
       console.log(projects[i1]); 
      } 

      //direct, one-off indexed 
      console.log(screenshots[0].screenshotURI); 
      console.log(data.Screenshots[0].screenshotURI); 

      //looped 
      screenshots.map(function(screenshot, index) { 
       console.log(screenshot.screenshotURI); 
      }); 

      if (data.returned === true) { 
       //your stringify code etc. 
      } 
     } 
    }); 
});