How can i display json data in jsp using javascript

Question

I'm using spring mvc. My controller "Book.java" is returning a json object. I want to display the content of json object in the form of table in jsp. How can i do that.

The function in My Controller which is returning json object:

@Controller
@RequestMapping(value="/book")
public class BookController {

@Autowired
BookService bookService;

@RequestMapping(value="/list",method=RequestMethod.GET)
public @ResponseBody
List<Book> getBookList(){
    List<Book> bookList = null;
    try{
        bookList = bookService.getBookList();
    }catch(Exception e){
        e.printStackTrace();
    }
    System.out.println("bookList returned");
    System.out.println(bookList);
    return bookList;
}

The bookList is list of books having contents "bookId" and "bookName". I want to display the content in jsp in a table. How can it be done.

I tried like this but the data wasn't displayed.

<table id="table1" align = center border='1.5' width='600' cellpadding='1' cellspacing='1'>
<h2>Book Details</h2>
<tr>
    <th>BookId</th>
    <th>BookName</th>
<!--     <th>Item Details</th>   -->
</tr>
<tbody>
</tbody>
</table>

My jquery call

<script type="text/javascript">

function madeAjaxCall(){
$.ajax({
type: "GET",
url: "http://localhost:8080/restApp/book/list",
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){ 
        if(data){
            var len = data.length;
            var txt = "";
            if(len > 0){
                for(var i=0;i<len;i++){
                    if(data[i].bookId && data[i].bookName){
                        txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td></tr>";
                    }
                }
                if(txt != ""){
                    $("#table1").append(txt).removeClass("hidden");
                }
            }
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error: ' + textStatus + ': ' + errorThrown);
    }
});
return false;
});


</script>

I tried to test the jquery call through a button

<button onclick="madeAjaxCall()">book list</button>

But the data could not be displayed.

JSON

[{
    "bookId": 1,
        "bookName": "aa",
        "chapter": [{
        "chapterId": 1,
        "chapterName": "xx",
        "book": null
    }, {
        "chapterId": 2,
        "chapterName": "yy",
        "book": null
    }]
}, {
    "bookId": 2,
        "bookName": "bb",
        "chapter": [{
        "chapterId": 4,
        "chapterName": "pp",
        "book": null
    }, {
        "chapterId": 3,
        "chapterName": "zz",
        "book": null
    }]
}, {
    "bookId": 3,
    "bookName": "cc",
        "chapter": [{
        "chapterId": 5,
        "chapterName": "qq",
        "book": null
    }, {
        "chapterId": 6,
        "chapterName": "rr",
        "book": null
    }]
}, {
    "bookId": 4,
    "bookName": "dd",
        "chapter": [{
        "chapterId": 8,
        "chapterName": "tt",
        "book": null
    }, {
        "chapterId": 7,
        "chapterName": "ss",
        "book": null
    }]
}]

1) does localhost:8080/restApp/book/list return valid JSON 2) is this on the same origin (server and port number) 3) any errors in the console? — mplungjan
– mplungjan, Commented Feb 6, 2015 at 13:46
Once I formatted the JSON correctly I have this: jsfiddle.net/mplungjan/9b8fz53n — mplungjan
– mplungjan, Commented Feb 6, 2015 at 15:41

hutchonoid · Accepted Answer · 2015-02-06 14:07:29Z

2

First you need to change your ajax call to be a 'GET' request.

This:

 type: "POST",

Needs to be this:

type: "GET",

You also need to set the content type to json with:

contentType: 'application/json',

Update

The following line will error:

 if(data[i].bookId && data[i].bookName){

I'm guessing you may want that to be something like:

 if(data[i].bookId != null && data[i].bookName != null){

edited Feb 6, 2015 at 14:07

answered Feb 6, 2015 at 13:47

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hutchonoid Over a year ago

@bablu Did you also set the contentType? See my other update. Post the error you are receiving too. It will be easier for people to resolve.

bablu Over a year ago

yup, i did set the contentType to contentType:"application/json; charset=utf-8",

Phil Roger · Accepted Answer · 2015-02-06 15:38:05Z

0

It seems the json output you posted is an array, not an object (starts with [, not {). You could use JSONObject class to output proper json object.

answered Feb 6, 2015 at 15:38

Phil Roger

332 bronze badges

Collectives™ on Stack Overflow

How can i display json data in jsp using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related