unable to retrieve json data using jQuery

Question

I'm trying to retrieve JSON data from servlet and display in html. I was able to connect to servlet using jQuery .ajax() but couldn't retrieve the json value.

Below is my html sample

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// click function

$('#btn').click(function(){

 // get the request

 /*

      $.ajax({url:'JsonCreationOfUrlAndContent',
             type:"GET",
             dataType:"json",
             asyn:true,
             success:function(data)
             { 

             $("div#main").text(data.Trends[1].title);}

      });


    */

    //now using getJSON

    $.getJSON('JsonCreationOfUrlAndContent',function(data)
            {
        $("div#main").html(data.Trends[1].title);
            });

        });

});


</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input id="btn" type="button" name="test" value="PressME"></input>
<div id="main">


</div>
</body>
</html>

And below is my java code where i'm creating some sample JSON of structure like below

{"Trends":[
     {"url":"http://google.com",
      "title":"No#1 Search Engine"},
     {"url":"http://bing.com",
     "title":"Best socal search engine"},
   {"url":"http://altavista.com",
   "title":"Oldest search engine"}]}

And below is my java code

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        PrintWriter pw =(PrintWriter)response.getWriter();
        // create the JSONObject

        JSONObject jobj1 = new JSONObject();
         jobj1.put("url","http://google.com");
         jobj1.put("title","No#1 Search Engine");

         JSONObject jobj2 = new JSONObject();
         jobj2.put("url","http://bing.com");
         jobj2.put("title","Best socal search engine");

         JSONObject jobj3 = new JSONObject();
         jobj3.put("url","http://altavista.com");
         jobj3.put("title","Oldest search engine");

         JSONArray jarr = new JSONArray();
          jarr.add(jobj1);
          jarr.add(jobj2);
          jarr.add(jobj3);

          // now add JSONArrayO to JSONObject

          JSONObject fObj = new JSONObject();
          fObj.put("Trends",jarr);

          pw.println(fObj);


    }

did you receive the json back from the server? firebug or something like that could help you — Dalen
– Dalen, Commented Jan 29, 2011 at 13:40
Can you be more specific than "couldn't retrieve"? Did you get an error? — Ken Redler
– Ken Redler, Commented Jan 29, 2011 at 13:42
hmm..sorry no idea on how to check..when i'm trying to put any alert it's not displaying anything.. — JavaGeek
– JavaGeek, Commented Jan 29, 2011 at 13:43
I just kept some SOP in last line and it's printing fine with below JSON structure. — JavaGeek
– JavaGeek, Commented Jan 29, 2011 at 13:55

Hery · Accepted Answer · 2011-01-29 14:12:27Z

1

Have you checked if you actually receive the json response using firebug?

I assume your commented code is the working version. In the lines you commented, there is this line:

$("div#main").text(data.Trends[1].title);

But in the one not commented, the line is a bit different:

$("div#main").html(data.Trends[1].title);

Maybe this is the cause?

answered Jan 29, 2011 at 14:12

Hery

7,6899 gold badges38 silver badges41 bronze badges

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

7 Comments

JavaGeek Over a year ago

Now i received the JSON response from servlet to html and displaying if i put it as $("div#main").text(data)

JavaGeek Over a year ago

But if i put like $("div#main").html(data.Trends[0].title); it's not displaying anything. How to iterate through JSON string in jQuery. Do i need to eval it and then display?

JavaGeek Over a year ago

I just identified something. If i'm removing dataType:"json" and displaying the json directly in html, it's printing whole json string. If i put it as dataType:"json" then json string is not printing. Quite weird

Hery Over a year ago

Hmm very strange. I have just tried running your code. It seems to be working well, except that I have to change jarr.add(jobj1); to jarr.put(jobj1); inside the java code (most likely just caused by difference in the library we used) and the jquery src to grab directly from jquery and the json url.

Ergec Over a year ago

Henry is right, I tested your JSON and jQuery (but on PHP), I did alert(), .text(), .html() all displayed "Best socal search engine" . Are you sure the code you are running is exactly same with the code you put here?

|

Ergec · Accepted Answer · 2011-01-29 14:09:20Z

1

asyn:true

should be

async:true

answered Jan 29, 2011 at 14:09

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

1 Comment

JavaGeek Over a year ago

thanks for pointing. I don't know but still it worked with even asyn :(

Collectives™ on Stack Overflow

unable to retrieve json data using jQuery

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related