使用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"  
    }
]

}

Java脚本

<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开发人员不是很好。

问候，

院长

Answer 1

在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"
    }]
};

Java脚本

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

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

}

Answer 2

我建议不要使用同步ajax请求，最好使用回调。 您可以像这样遍历每个房屋对象：

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