getting data from a json array into a table

Question

I am trying to create a filter search for my company's CMS list of articles. I am not sure how to turn the returning JSON data into data for my html table. I have, however, not done this before and am not sure how to iterate through the data.

Here is some dummy output data:

[{"articleID":"7298","title":"inbrief","issueDate":"July 2012"},{"articleID":"7299","title":"inbrief","issueDate":"July 2012"},{"articleID":"7300","title":"inbrief","issueDate":"July 2012"},{"articleID":"7301","title":"inbrief","issueDate":"July 2012"}]

Here is the relevant JS code:

$.post("link",  { issue: isearch, availability: asearch, type: tsearch }, function(data) {
        var htm =''
        console.log(data);
        for(var i=0; i<data.length; i++)
        {
            jason = data.getJSONObject(i);
            articleID = jason.articleID;
            title = jason.title;
            issueDate = jason.issueDate;
            htm += '<tr id="news'+articleID+'">'
                +   '<td>'+title+'</td>'
                +   '<td>'+issueDate+'</td>'
                +   '<td><a href="cms/index/addnews/news/'+articleID+'">make top news</a></td>'
                +   '<td><a href="link">view</a></td>'
                +   '<td><a href="cms/news/updatenews/'+articleID+'">update</a></td><td><a href="" class="delete" id="'+articleID+'">delete</a></td>'
                +   '</tr>';
        }
        $('.cms').html(htm);
    });

I already tried doing this using data[i].articleID but that didn't work for me either.

data.getJSONObject is not a function within your dummy data... — bluetoft
– bluetoft, Commented Nov 14, 2012 at 20:52

bluetoft · Accepted Answer · 2012-11-14 20:59:09Z

2

data.getJSONObject is not a function. You just need to change that to data[i]

http://jsfiddle.net/A3Srb/

EDIT

I noticed you said you already tried data[i]. Are you sure that data is the same as the dummy data you have in your example? Use fiddler or add a console.log(data) to be certain.

edited Nov 14, 2012 at 20:59

answered Nov 14, 2012 at 20:54

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

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

3 Comments

jonners99 Over a year ago

data[i] seems to be getting me into the array but there are two problems. 1) it is showing 'undefined' for everything 2) data.length is returning 3238. It should really be about 30

jonners99 Over a year ago

yeh data is giving each character so data[i] returns a single character from data. So for some reason it is a string and not an array?

jonners99 Over a year ago

Ok we are set, I also needed data = JSON.parse(data); thanks for your help

Community · Accepted Answer · 2017-05-23 11:56:11Z

try this, replace your for statement with an each and use append() rather than html() on your table, html() would just clear it out each time

 $(document).ready(function() {
 var data = [{"articleID":"7298","title":"inbrief","issueDate":"July 2012"},{"articleID":"7299","title":"inbrief","issueDate":"July 2012"},{"articleID":"7300","title":"inbrief","issueDate":"July 2012"},{"articleID":"7301","title":"inbrief","issueDate":"July 2012"}];

    $.each(data, function(key, value){

         htm = '<tr id="news'+data[key].articleID+'">';
            htm+=   '<td>'+data[key].title+'</td>';
            htm+=   '<td>'+data[key].issueDate+'</td>';
            htm+=  '<td><a href="cms/index/addnews/news/'+data[key].articleID+'">make top news</a></td>';
            htm+=   '<td><a href="link">view</a></td>';
            htm+= '<td><a href="cms/news/updatenews/'+data[key].articleID+'">update</a></td><td><a href="" class="delete" id="'+data[key].articleID+'">delete</a></td>';
            htm+=   '</tr>';
            $('.cms').append(htm);
        });


});

here is the jsfiddle of the code without the $.post logic, as i did not know what those vars were for isearch ect http://jsfiddle.net/94jXh/

if you would like to make your notation more readable, sub this in for the htm var setting

         htm = '<tr id="news'+key.articleID+'">';
            htm+=   '<td>'+key.title+'</td>';
            htm+=   '<td>'+key.issueDate+'</td>';
            htm+=  '<td><a href="cms/index/addnews/news/'+key.articleID+'">make top news</a></td>';
            htm+=   '<td><a href="link">view</a></td>';
            htm+= '<td><a href="cms/news/updatenews/'+key.articleID+'">update</a></td><td><a href="" class="delete" id="'+key.articleID+'">delete</a></td>';
            htm+=   '</tr>';

I do however agree with https://stackoverflow.com/users/425275/ime-vidas, using a template jquery plugin would work better, i like jsrender https://github.com/BorisMoore/jsrender

Beetroot-Beetroot · Accepted Answer · 2012-11-14 21:24:41Z

For efficiency, I suggest something like this:

var articleTemplate = '<tr id="news%1"><td>%2</td><td>%3</td><td><a href="cms/index/addnews/news/%1">make top news</a></td><td><a href="link">view</a></td><td><a href="cms/news/updatenews/%1">update</a></td><td><a href="" class="delete" id="%1">delete</a></td></tr>';//informal template

$.post("link",  { issue: isearch, availability: asearch, type: tsearch }, function(data) {
    var htm = $.map(data, function(a, i) {
        return articleTemplate.replace(/%1/g, a.articleID).replace('%2', a.title).replace('%3', a.issueDate);
    });
    $('.cms').html(htm.join(''));
});

This minimises the number of partial strings involved in building htm and hence imposes less load on the client memory and gives Garbage Collection less work to do.

If you do a lot of other templating then consider something like Moustache or Handlebars, otherwise the informal approach above is fine (and very efficient).

Collectives™ on Stack Overflow

getting data from a json array into a table

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related