CODEWITHSUNDEEP
jquery
Toma Tomov
Toma Tomov

Reputation: 1654

jQuery dynamic table can't be displayed

I am trying to create dynamic table with jQuery which must contain JSON object properties but can't realize where is my problem. What i get is [object Object].When console.log(data[i].title) let's say, it is giving me correct output. Can you guys take a look and give me some advice? Thank you!(I also tried with text instead of value.)

$.ajax({
    type : 'GET',
    url : '../post/search-tag?tag='+input,
    dataType : 'json',
    success : function( data ){
        if(data.length == 0){
            alert('No posts found!');
        }else{
            $('#posts').css('display', 'none');
            $('.list-view').css('display', 'initial');
            var table = document.createElement('table');
            var thead = document.createElement('tr');
            table.append(thead);

            var title = document.createElement('td');
            var textTitle = document.createTextNode('Title');
            title.append(textTitle);

            var content = document.createElement('td');
            var textContent = document.createTextNode('Content');
            content.append(textContent);

            var date = document.createElement('td');
            var textDate = document.createTextNode('Create Date');
            date.append(textDate);

            thead.append(title);
            thead.append(content);
            thead.append(date);

            for(var i=0; i < data.length; i++){
                var aTitle = $('<a>', {
                    value : data[i].title,
                    href : '../post/view?id=' + data[i].post_id
                });
                var aContent = $('<a>', {
                    value : data[i].content,
                    href : '../post/view?id=' + data[i].post_id
                });
                var aDateCreate = $('<a>', {
                    value : data[i].date_create,
                    href : '../post/view?id=' + data[i].post_id
                });

                var tr = document.createElement('tr');

                tr.append($('<td>', {}).append(aTitle));

                tr.append($('<td>', {}).append(aContent));

                tr.append($('<td>', {}).append(aDateCreate));

                table.append(tr);
            }

            $('.list-view').prepend(table);
            $('.list-view').find('table').addClass('table customize');
        }
    }
});

JSON object in the console output

Upvotes: 0

Views: 39

Answers (1)

funcoding
funcoding

Reputation: 791

Your forgot to include the text property to your href object: (add it to every href tag you have)

 var aTitle = $('<a>', {
            value : data[i].title,
            text : 'Something',
            href : '../post/view?id=' + data[i].post_id
 });

Also: be consistent when using Jquery: (That's why you are getting [object Object][object Object][object Object])

change this line:

var tr = document.createElement('tr');

to : var tr = $('<tr>');

Upvotes: 1

Related Questions