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 に答える