用ajax/javascript顯示多個json數組

Question

我有一些問題顯示多個JSON數組，如果有人可以幫助， 我將不勝感激。

JSON

{ 
"houseOne": [ 
    { 
     "name": "John Clarke", 
     "age": 22, 
     "dob": "19-11-90" 
    }, 
     { 
     "name": "Mitch Woodier", 
     "age": 20, 
     "dob": "23-10-92" 
    }, 
     { 
     "name": "Mavis Waddingham", 
     "age": 21, 
     "dob": "10-11-91" 
    } 
], 

      "houseTwo": [ 
    { 
     "name": "Luke Woodier", 
     "age": 22, 
     "dob": "19-11-90" 
    }, 
     { 
     "name": "Rob Clarke", 
     "age": 20, 
     "dob": "23-10-92" 
    }, 
     { 
     "name": "Alex Gayfag", 
     "age": 21, 
     "dob": "10-11-91" 
    } 
] 

}

的Javascript

<script type="text/javascript"> 
    function ajaxRequest(url) 
    { 
     var request = new XMLHttpRequest(); 

      // Work around for IE caching problem 
      if (url.indexOf('?') < 0) { 
       today = new Date(); 
       url += '?' + today.getTime(); 
      } 

     request.open("GET", url, false); 
     request.setRequestHeader("Cache-Control", "no-cache"); 
     request.send(); 
     return request.responseText; 
    } 

    var data = ajaxRequest("results.json"); 
    var houses = JSON.parse(data); 

    function displayJson() { 
     var myDiv =document.getElementById("content"); 
     for (house = 0; house < 3; house++) { 
      var home = houses.houseOne[house]; 
      myDiv.innerHTML += houseDetails(home,house); 

     } 
    } 


    function houseDetails(home,houseNumber){ 


    var myHTML = "<h1>House Mate "+ (houseNumber +1)+"</h1>"; 
    myHTML += "<table>"; 
    myHTML += "<tr><th>Name</th><th>Age</th><th>D.O.B</th></tr>"; 
    myHTML += "<tr>"; 
    myHTML += "<td>"; 
    myHTML += home.name; 
    myHTML += "</td>"; 
    myHTML += "<td>"; 
    myHTML += home.age; 
    myHTML += "</td>"; 
    myHTML += "<td>"; 
    myHTML += home.dob; 
    myHTML += "</td>"; 
    myHTML += "</table>"; 

    return myHTML 



    }  

</script> 

基本上我可以得到它顯示houseOne作爲一個表，但我不能讓它同時顯示houseOne和houseTwo，我希望這很清楚，我對web dev不太瞭解。

問候，

院長

Answer 1

我建議不使用同步Ajax請求，這將是更好的使用回調。 你可以通過每家對象像這樣itterate：

function displayJson() { 
    var i,h,ret=[]; 
    var myDiv =document.getElementById("content"); 
    // houseone and housetwo 
    for (h in houses) { 
     // houseone and housetwo are arrays: [house,house,house] 
     // for every house in this array do: 
     for(i=0;i<houses[h].length;i++){ 
      var home = houses[h][i]; 
      ret.push(houseDetails(home,i)); 
     } 
    } 
    //setting innerHTML is resource intensive 
    // no reason to do this within a loop. 
    myDiv.innerHTML=ret.join(""); 
} 

[訪問/處理（嵌套的）對象，數組或JSON（的

Answer 2

在你displayJson（）函數，你只是引用house.houseOne

var home = houses.houseOne[house]; 

下面是一個更新版本（我已經添加了jQuery的太）http://jsfiddle.net/XzZUR/1/

JSON

var houses = { 
    "houseOne": [{ 
     "name": "John Clarke", 
      "age": 22, 
      "dob": "19-11-90" 
    }, { 
     "name": "Mitch Woodier", 
      "age": 20, 
      "dob": "23-10-92" 
    }, { 
     "name": "Mavis Waddingham", 
      "age": 21, 
      "dob": "10-11-91" 
    }], 

     "houseTwo": [{ 
     "name": "Luke Woodier", 
      "age": 22, 
      "dob": "19-11-90" 
    }, { 
     "name": "Rob Clarke", 
      "age": 20, 
      "dob": "23-10-92" 
    }, { 
     "name": "Alex Gayfag", 
      "age": 21, 
      "dob": "10-11-91" 
    }] 
}; 

的Javascript

function displayJson() { 
    var myDiv = $("#content"); 

    $.each(houses, function(){ 
     var house = this; 
     $(house).each(function(key){ 
      myDiv.append(houseDetails(this,key)); 
     }) 
    }); 

}