解析通過JSON Jquery

Question

Test.Customers = [{ 
    "CustomerPortals":[{ 
     "filename":"chrysanthemum.jpg", 
     "ext":"jpg", 
     },{ 
     "name":"Lighthouse.jpg", 
     "filename":"lighthouse.jpg", 
     "ext":"jpg", 
     },{ 
     "filename":"lighthouse.jpg", 
     "ext":"jpg", 
     } 
     }] 

我有這個JSON存儲在我的DOM。有時在CustomerPortals數組中會有0個項目，有時還有多個項目。但我想通過它們解析並顯示文件名。 jquery是否使它更簡單？

編輯

編輯

var Test = {}; 

Test.Customers = [{"CustomerItems": 
          "Portals": 
          {"id":"1","customer":"1950","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"11","test":"4251","portalname":"tye.jpg"}, 
             {"id":"12","test":"4251","portalname":"Lsdf.jpg"}, 
             {"id":"13","test":"4251","portalname":"nick.jpg"} 
             ] 
          } 
        }, 
        {"CustomerItems": 
          "Portals": 
          {"id":"2","customer":"1952","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"}, 
             {"id":"15","test":"4255","portalname":"navagin.jpg"}, 
             {"id":"16","test":"4257","portalname":"jasoria.jpg"} 
             ] 
          } 
        }, 
        {"CustomerItems": 
          "Portals": 
          {"id":"3","customer":"1950","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"}, 
             {"id":"18","test":"4651","portalname":"Ltd1.jpg"}, 
             {"id":"19","test":"4281","portalname":"ser1.jpg"} 
             ] 
          } 
        } 
       ] 

我想要得到的portalname所有 客戶。上面不是 顯示子陣謝謝

Answer 1

我能想到的是jQuery的的唯一的事情可以幫助你用的是.each()函數。這裏是一個例子，我通過每個客戶的每個文件名。

更新後的代碼，包含持有CustomerPortals的門戶。如果我錯誤地解釋了你的評論，請告訴我。

再次更新代碼以使用新的示例代碼。示例代碼導致錯誤，因此我在「門戶」和它的值周圍添加了{}。如果這不是代碼的預期格式，請告訴我。

var Test = {}; 

Test.Customers = [{"CustomerItems": 
          {"Portals": 
           {"id":"1","customer":"1950","resident":"yes", 
           "CustomPortals": 
              [ 
              {"id":"11","test":"4251","portalname":"tye.jpg"}, 
              {"id":"12","test":"4251","portalname":"Lsdf.jpg"}, 
              {"id":"13","test":"4251","portalname":"nick.jpg"} 
              ] 
           } 
          } 
        }, 
        {"CustomerItems": 
          {"Portals": 
           {"id":"2","customer":"1952","resident":"yes", 
           "CustomPortals": 
              [ 
              {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"}, 
              {"id":"15","test":"4255","portalname":"navagin.jpg"}, 
              {"id":"16","test":"4257","portalname":"jasoria.jpg"} 
              ] 
           } 
          } 
        }, 
        {"CustomerItems": 
          {"Portals": 
           {"id":"3","customer":"1950","resident":"yes", 
           "CustomPortals": 
              [ 
              {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"}, 
              {"id":"18","test":"4651","portalname":"Ltd1.jpg"}, 
              {"id":"19","test":"4281","portalname":"ser1.jpg"} 
              ] 
           } 
          } 
        } 
       ] 




$(document).ready(function() { 

    //Go through each customer 
    $.each(Test.Customers, function(customerIndex, customerValue) { 

     //Go through each CustomerPortal and display filename 
     $.each(customerValue.CustomerItems.Portals.CustomPortals, function(custPortIndex, custPortValue) { 

      alert('File ' + custPortValue.portalname + ' in customer ' + customerIndex); 

     }); 

    }); 

}); 

編輯

var Test = {}; 

Test.Customers = [{"CustomerItems": 
          "Portals": 
          {"id":"1","customer":"1950","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"11","test":"4251","portalname":"tye.jpg"}, 
             {"id":"12","test":"4251","portalname":"Lsdf.jpg"}, 
             {"id":"13","test":"4251","portalname":"nick.jpg"} 
             ] 
          } 
        }, 
        {"CustomerItems": 
          "Portals": 
          {"id":"2","customer":"1952","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"}, 
             {"id":"15","test":"4255","portalname":"navagin.jpg"}, 
             {"id":"16","test":"4257","portalname":"jasoria.jpg"} 
             ] 
          } 
        }, 
        {"CustomerItems": 
          "Portals": 
          {"id":"3","customer":"1950","resident":"yes", 
          "CustomPortals": 
             [ 
             {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"}, 
             {"id":"18","test":"4651","portalname":"Ltd1.jpg"}, 
             {"id":"19","test":"4281","portalname":"ser1.jpg"} 
             ] 
          } 
        } 
       ] 

我想要得到的portalname所有 客戶。上述不 表示子陣列感謝

Answer 2

我對此表示懷疑。 JSON對象層次結構作爲DOM節點不可見。

您可以使用地圖功能，該功能非常易於使用write，並且可以在Functional JavaScript等庫中隨時使用。使用它很簡單：

filenames = Test.Customers[0].CustomerPortals.map(function(cp) { return cp.filename }); 

然後做任何你想要的文件名數組。

編輯：爲了證實這一點，我跑了JavaScript test bench下面的代碼。

Test = {}; 

Test.Customers = [{ 
    "CustomerPortals":[{ 
     "filename":"chrysanthemum.jpg", 
     "ext":"jpg", 
     },{ 
     "name":"Lighthouse.jpg", 
     "filename":"lighthouse.jpg", 
     "ext":"jpg", 
     },{ 
     "filename":"lighthouse.jpg", 
     "ext":"jpg", 
     }] 
     }]; 

Array.prototype.map = function(fn) { 
       var r = []; 
       var l = this.length; 
       for(i=0;i<l;i++) 
       { 
        r.push(fn(this[i])); 
       } 
       return r; 
      }; 

alert(Test.Customers[0].CustomerPortals.map(function(cp) { return cp.filename })); 

顯示一個提醒，出現以下消息：

chrysanthemum.jpg，lighthouse.jpg，lighthouse.jpg