Difficulty Parsing JSON with JQuery

Question

I have developed an application to write twitter search results as JSON objects to a results page as such:

for (Status tweet : tweets) {
    Map<String, String> tweetResult = new LinkedHashMap<String, String>();
    tweetResult.put("username", tweet.getUser().getScreenName());
    tweetResult.put("status", tweet.getText());
    tweetResult.put("date", tweet.getCreatedAt().toString());
    tweetResult.put("retweets", String.valueOf(tweet.getRetweetCount()));
    String resultJson = new Gson().toJson(tweetResult);
    response.getWriter().write(resultJson);
}

This is called with AJAX/JQuery in the following:

$(document).ready(function() {                                                                      
    $.getJSON('SearchServlet', function(list) {
        var table = $('#resultsTable');
        $.each(list, function(index, tweet) {
        $('<tr>').appendTo(table)
                .append($('<td>').text(tweet.username))
                .append($('<td>').text(tweet.status))
                .append($('<td>').text(tweet.date))
                .append($('<td>').text(tweet.retweets));
        });
    });
});

With the intention of populating a table with the results:

<body>
    <div id="wrapper">      
        <div id="contentArea">
            <div id="content">
                <h2>Results:</h2>
                <table id="resultsTable"></table>
            </div>
        </div>
    </div>
</body>

The GET call is working perfectly and the results show up in the firebug console without a problem, however they're not appearing on the actual document itself as intended. I've tried a number of different approaches to this (including the answers here and here ).

Example of the JSON output:

{"username":"Dineen_","status":"RT @TwitterAds: Learn how to put Twitter to work for your small business! Download our small biz guide now: https://t.co/gdnMMYLI","date":"Tue Feb 26 08:37:11 GMT 2013","retweets":"22"}

Thanks in advance.

It is better if you show the actual HTML result you are seeing — Alexander
– Alexander, Commented Feb 26, 2013 at 18:02
Alexander, the html results are the same as above. Nothing is being rendered, not even the <td> tags for the intended results. — richardb
– richardb, Commented Feb 26, 2013 at 18:51
Your problem looks to be in the browser, not in the Java part. So for conciseness, I'd remove that part and only ask about the javasript/json/html. — flup
– flup, Commented Mar 16, 2013 at 10:54

Alexander · Accepted Answer · 2013-02-26 23:06:53Z

4

It seems your serialization is wrong. Since you are generating a sequence of concatenated JSON objects not enclosed properly in an array.

Current invalid JSON response:

{ ... } { ... } { ... } { ... }

Whereas the expected JSON response should be:

[ { ... }, { ... }, { ... }, { ... } ]

No need to do this by hand. Gson may do it automatically for you if you construct the proper object. For example, using something as follows (untested):

List<Map<String, String>> tweetList = new LinkedList<Map<String, String>>();
for (Status tweet : tweets) {
    Map<String, String> tweetResult = new LinkedHashMap<String, String>();
    tweetResult.put("username", tweet.getUser().getScreenName());
    tweetResult.put("status", tweet.getText());
    tweetResult.put("date", tweet.getCreatedAt().toString());
    tweetResult.put("retweets", String.valueOf(tweet.getRetweetCount()));
    tweetList.add(tweetResult);
}
String resultJson = new Gson().toJson(tweetList);
response.getWriter().write(resultJson);

After this fix you should be able to use your original code.

Based on your example JSON output the returned output is an Object, not an Array. You don't need to use $.each here.

$(document).ready(function () {
    $.getJSON('SearchServlet', function(tweet) {
        var table = $('#resultsTable');
        $('<tr>').appendTo(table)
                 .append($('<td>').text(tweet.username))
                 .append($('<td>').text(tweet.status))
                 .append($('<td>').text(tweet.date))
                 .append($('<td>').text(tweet.retweets));
    });
});

edited Feb 26, 2013 at 23:06

answered Feb 26, 2013 at 18:07

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

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

7 Comments

richardb Over a year ago

Hi Alexander, I tried out the code you provided and it's still not rendering the table. Firebug is showing it GETing the data fine, an example being searching for the term "Twitter" resulted in:

richardb Over a year ago

Firebug console displays the GET response JSON objects, but the dev console on Chrome is showing nothing? Even with console.log(tweet) included in the code? Neither are rendering the table though or even the <td> tags that it should be.

Alexander Over a year ago

@richardb, just to be clear. Is tweet being populated? Can you show us the response as Firebug or Chrome Developer Tools is displaying it?

richardb Over a year ago

Hi Alexander, I've taken a few screenshots of the console with the results for "Alexander" first, headers and full response objects . I also added a console.log("test") after the $.getJSON call but as you can see in the console, it's not logged there and I'm not entirely sure why since it appears the function is, at the very least, calling the doGet on the servlet fine. Thanks for the help, it's much appreciated.

richardb Over a year ago

Just to follow up on that. I put console.log("test") in after .ready() is called and it logs to the console fine. If I move it to within the $.getJSON() is called it doesn't log to the console. If I log "test" to the console after and outside the $.getJSON() it also works fine so it appears there's some issue between the $.getJSON() call and what happens immediately afterward.

|

Steve · Accepted Answer · 2013-02-26 18:07:33Z

I think the issue is with your use of $.each. Since you are passing in an object, each is iterating over the key-value pairs of the object. (see http://api.jquery.com/jQuery.each/)

You might want to return a JSON object that is wrapped in square brackets, just so it iterates over an array.

[{"username":"Dineen_","status":"RT @TwitterAds: Learn how to put Twitter to work for your small business! Download our small biz guide now: https://t.co/gdnMMYLI","date":"Tue Feb 26 08:37:11 GMT 2013","retweets":"22"}]

EDIT: As Alexander points out, you can just return the same object as you already do, but NOT use the $.each at all. My answer assumes you want to be able to pass back several objects and insert every one in a table row.

Collectives™ on Stack Overflow

Difficulty Parsing JSON with JQuery

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related