尝试在javascript中制作下一个按钮以显示json数组

Question

I am trying to display the json array according to certain start and end indices. I did displayed it all but when I click on first button it doesn't work. Here is my code .. after clicking on first button it says "this.data is undefined" any help ??

 function GridLibrary(data) { this.data = data; } GridLibrary.prototype.display = function() { var html = []; html.push("<table >\\n<tbody>"); html.push("<tr>"); for ( var propertyNames in this.data[0]) { html.push("<th>" + propertyNames + "</th>"); } html.push("</tr>"); // loop through the array of objects for (var i = startIndex; i < endIndex; i++) { item = this.data[i]; html.push("<tr>"); for ( var key in item) { html.push("<td>" + item[key] + "</td>"); } html.push("</tr>"); } html.push("<table>\\n</tbody>"); $('body').append(html.join("")); }; var grid = new GridLibrary(); $("#first").click(function() { //size = parseInt(document.getElementById("listsize").value, 10); startIndex = 3; endIndex = 6; grid.display(); });

the Grid.jsp

<script type="text/javascript">
    var json = [ {
        "id" : 1,
        "name" : "name1",
        "age" : 10,
        "feedback" : "feedback1"
    }, {
        "id" : 2,
        "name" : "name2",
        "age" : 90,
        "feedback" : "feedback2"
    }, {
        "id" : 3,
        "name" : "name3",
        "age" : 30,
        "feedback" : "feedback3"
    }, {
        "id" : 4,
        "name" : "name4",
        "age" : 50,
        "feedback" : "feedback4"
    }, {
        "id" : 5,
        "name" : "name5",
        "age" : 55,
        "feedback" : "feedback5"
    }, {
        "id" : 6,
        "name" : "name6",
        "age" : 68,
        "feedback" : "feedback6"
    }, {
        "id" : 7,
        "name" : "name7",
        "age" : 57,
        "feedback" : "feedback7"
    }, {
        "id" : 8,
        "name" : "name8",
        "age" : 89,
        "feedback" : "feedback8"
    }, {
        "id" : 9,
        "name" : "name9",
        "age" : 65,
        "feedback" : "feedback9"
    }, {
        "id" : 10,
        "name" : "name10",
        "age" : 54,
        "feedback" : "feedback10"
    }, {
        "id" : 11,
        "name" : "name11",
        "age" : 51,
        "feedback" : "feedback11"
    }, {
        "id" : 12,
        "name" : "name12",
        "age" : 97,
        "feedback" : "feedback12"
    } ];
    new GridLibrary(json).display();
</script>

Answer 1

I've made a few assumptions here.

1) Your constructor should accept a parameter which will be your data:

function GridLibrary(data){
  this.data = data;
  return this;
}

2) This will be used like so:

var grid = new GridLibrary(json);

3) You should then pass in startIndex and endIndex as parameters to display() :

grid.display(0, 11);

or

grid.display(3, 6);

and change the method to accept those arguments:

GridLibrary.prototype.display = function(startIndex, endIndex) {...

4) Finally you should change the HTML (not append) to a specific div otherwise you will overwrite your first button:

$('#body').html(html.join(""));

DEMO

Answer 2

Just by looking at your code, it seems like you don't close your table tag properly. The last html.push adds a new <table> , instead of </table> . They are also in the wrong order, it should be </tbody></table>

edit: fixed formatting