Showing JQuery Arraylist values using Struts2 and JSON

I am having comment class, I want to show its property values to jsp page using json

Comments.java

package example;

import java.sql.Timestamp;

public class Comments {

    private int id;
    private String name;
    private String pic;
    private String comment;
    private Timestamp commentDate;

    public String getComment() {
        return comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public Timestamp getCommentDate() {
        return commentDate;
    }

    public void setCommentDate(Timestamp commentDate) {
        this.commentDate = commentDate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPic() {
        return pic;
    }

    public void setPic(String pic) {
        this.pic = pic;
    }
}

package example;

import java.sql.Timestamp;

public class Comments {

private int id;

private String name;

private String pic;

private String comment;

private Timestamp commentDate;

public String getComment() {

return comment;

}

public void setComment(String comment) {

this.comment = comment;

}

public Timestamp getCommentDate() {

return commentDate;

}

public void setCommentDate(Timestamp commentDate) {

this.commentDate = commentDate;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getPic() {

return pic;

}

public void setPic(String pic) {

this.pic = pic;

}

ListJson assigning values for comments.java. Here we fetch value of commentList and totalcomments value in our jsp page.

package example;

import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;

public class ListJson extends ActionSupport {

    private ArrayList commentList = new ArrayList<comments>();
    private long totalComments;

    public String execute() {
        comments c = new comments();
        c.setId(1);
        c.setName("Manish");
        c.setComment("Hi how are you");
        c.setPic("a.jpg");
        c.setCommentDate(null);

        comments d = new comments();
        d.setId(2);
        d.setName("Nita");
        d.setComment("I am fine");
        d.setPic("b.jpg");
        d.setCommentDate(null);
        commentList.add(c);
        commentList.add(d);
        setTotalComments(commentList.size());
        System.out.println("In action");

        return SUCCESS;
    }

    public long getTotalComments() {
        return totalComments;
    }

    public void setTotalComments(long totalComments) {
        this.totalComments = totalComments;
    }

    public ArrayList getCommentList() {
        return commentList;
    }

    public void setCommentList(ArrayList commentList) {
        this.commentList = commentList;
    }
}
</comments>

package example;

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;

public class ListJson extends ActionSupport {

private ArrayList commentList = new ArrayList<comments>();

private long totalComments;

public String execute() {

comments c = new comments();

c.setId(1);

c.setName("Manish");

c.setComment("Hi how are you");

c.setPic("a.jpg");

c.setCommentDate(null);

comments d = new comments();

d.setId(2);

d.setName("Nita");

d.setComment("I am fine");

d.setPic("b.jpg");

d.setCommentDate(null);

commentList.add(c);

commentList.add(d);

setTotalComments(commentList.size());

System.out.println("In action");

return SUCCESS;

}

public long getTotalComments() {

return totalComments;

}

public void setTotalComments(long totalComments) {

this.totalComments = totalComments;

}

public ArrayList getCommentList() {

return commentList;

}

public void setCommentList(ArrayList commentList) {

this.commentList = commentList;

}

</comments>

Struts.xml

 <package name="example1" extends="struts-default, json-default">
        <action name="fetchComments" class="example.ListJson">
            <result type="json"></result>
        </action>
    </package>

</action>

</package>

In Jsp page

&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;


    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    
    
        <input type="button" id="button1" value="Submit">


<div class="total-comments"></div>


<div class="allcomments">

</div>

        <script>
            $("#button1").click(function() {
                $.getJSON('fetchComments', function(data) {
                    $(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");
                   
                    var msg;
                 
                    $.each(data.commentList, function(j) {
                        msg='<div class="comment">';
                        msg+= '<div class="id">'+data.commentList[j].id+'</div>'
                        msg+= '<div class="name">'+data.commentList[j].name+'</div>';         
                        msg+= '<div class="image">'+data.commentList[j].pic+'</div>'
                        msg+= '<div class="image">'+data.commentList[j].comment+'</div>'
                        msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'
                        msg+='</div>';
                        $(".allcomments").append(msg);
                    });
                    return false;                    
                });
            });
           </script>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

</div>

$("#button1").click(function() {

$.getJSON('fetchComments', function(data) {

$(".total-comments").html("<h2>Total comments are "+data.totalComments+"</div>");

var msg;

$.each(data.commentList, function(j) {

msg='<div class="comment">';

msg+= '<div class="id">'+data.commentList[j].id+'</div>'

msg+= '<div class="name">'+data.commentList[j].name+'</div>';

msg+= '<div class="image">'+data.commentList[j].pic+'</div>'

msg+= '<div class="image">'+data.commentList[j].comment+'</div>'

msg+= '<div class="commentDate">'+data.commentList[j].commentDate+'</div>'

msg+='</div>';

$(".allcomments").append(msg);

});

return false;

});

</script>