在多返回的數據結構中訪問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. 
      } 
     } 
    }); 
});