0

如果有人可以提供帮助，我在显示多个 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，我希望这很清楚我对网络开发不是很好。

问候，

院长

4

2 回答 2

3

在您的 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));
        })
    });

}
于 2013-06-02T07:50:21.590 回答
1

我建议不要使用同步 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("");
}
于 2013-06-02T07:52:40.747 回答