displaying JSON data on page with javascript

Question

I finally had success passing data through AJAX and returning it in JSON. However, now I don't know how to display it on my page.

here is my JS:

$(function() {
    $( "#selectable" ).selectable({
        selected: updatefilters,
        unselected: updatefilters
    });   
    function updatefilters(ev, ui){
        // get the selected filters
        var $selected = $('#selectable').children('.ui-selected');
        // create a string that has each filter separated by a pipe ("|")
        var filters = $selected.map(function(){return this.id;}).get().join("\|");
        $.ajax({
            type: "POST",
            url: 'updatefilters',
            dataType: 'json', 
            data: { filters: filters },
            success: function(data){
                $('#board').replaceWith(data.content);
            }
        });
    }
});

after my model runs, it echos the following as discovered in firebug:

[{"thread_id":"226","owner_id":"1","subject":"trying to create a HUGE body for thread testi","body":"Firstly, I think 45 characters is perfect for the heading. \n\nHowever, once the body gets huge, I assume that the \"preview\" is going to get a bit out of hand if not truncated. I have truncated code in place...but it doesn't seem to be working.\n\nI'll have to keep testing to ensure we can get it shrunk down to a few hundred characters so as to not completely screw up the page format\n\nyadda yadda yadda...yadda yadda yadda...and more yadda yadda yadda...\n\nBabble Babble Babble Babble Babble \n\nBabble Babble Babble ","timestamp":"2012-05-02 15:29:19","replystamp":"2012-05-02 15:29:53","last_post_id":"1","slug":"226-trying-to-create-a-huge-body-for-thread-testi","replies_num":"1","views":"19"},{"thread_id":"219","owner_id":"3","subject":"testing icons","body":"hellow world","timestamp":"2012-05-01 11:37:08","replystamp":"2012-05-01 11:37:08","last_post_id":"3","slug":"219-testing-icons","replies_num":"0","views":"3"},{"thread_id":"212","owner_id":"1","subject":"This thread is based off entertainm","body":"Yay","timestamp":"2012-04-25 14:07:55","replystamp":"2012-04-25 14:07:55","last_post_id":"1","slug":"212-this-thread-is-based-off-entertainment","replies_num":"0","views":"4"}]

any advice on how to replace the div "board" with data from the returned JSON array would be incredibly helpful!

McGarnagle · Accepted Answer · 2012-05-07 23:51:11Z

1

Let's say you want to display the data in a table with subject and body. You could write like this:

success: function(data){
    var html = "<table>";
    for (i=0 ; i< data.length ; i++)
    {
        html += "<tr><td>" + data[i].subject + "</td><td>" + data[i].body + "</td></tr>";
    }
    html += "</table";
    $('#board').html(html);
}

You get the idea. I also recommend looking into templating libraries mustache.js if you have time to investigate a nicer solution. That will let you separate your template from the data, and eliminate the ugly concatenation of HTML and data using Javascript. (Kind of a more advanced solution though, and you may want to just keep it simple.) Mustache.js engine allows you to write the above like this:

var template = "{{#item}}<tr><td>{{subject}}</td><td>{{body}}</td></tr>{{/item}}";
var html = "<table>" + mustache.render(template, data) + "</table>";
$("#board").html(html);

answered May 7, 2012 at 23:51

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

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

1 Comment

Ricky Mason Over a year ago

I orignally had a view that displayed the data taken straight from a mySQL query. Is there anyone I can use that view to display this data? Its a lot of HTML...and putting it in javascript sounds very difficult.

Oswaldo Acauan · Accepted Answer · 2012-05-07 23:41:38Z

1

success: function(data){
 $.each(data, function(index, value) { 
    $('#board').append(index + ': ' + value + '<br/>'); 
 });
}

You can also directly access a value from json

success: function(data) {
    $('#board').append('Thread Subject' + data.subject); 
}

answered May 7, 2012 at 23:41

Oswaldo Acauan

2,75017 silver badges23 bronze badges

3 Comments

Ricky Mason Over a year ago

Thanks! Its finally doing something. Though its returning this : 0: [object Object] 1: [object Object] 2: [object Object]

Oswaldo Acauan Over a year ago

Can you give a console.log (data) on the success and paste here what is printed by firebug?

Ricky Mason Over a year ago

I believe its displaying the same thing I posted in the question (the second code post). Im new to firebug, and not sure how to accomplish what youre asking

Collectives™ on Stack Overflow

displaying JSON data on page with javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related