CODEWITHSUNDEEP
javascriptjqueryarraysdom
3gwebtrain
3gwebtrain

Reputation: 15303

jQuery `map` convert arrays in to `dom` element

I am looping a data, and creating a result using map method from jQuery. after the loop done, I am getting the result as array based object like this:

[jQuery.fn.init[1], jQuery.fn.init[1], jQuery.fn.init[1], jQuery.fn.init[1], jQuery.fn.init[1]]

But i require the jQuery based object (regular dom element) how can i get that from the map output?

I tried using get() after completing the loop. but throws error. what is the correct way to get the dom output?

Here is my function :

this.tbody = this.tableData.map(function (item, index) {
    tr = $('<tr />', { id: item.ID });
    tr.append('<td><input class="selectRow" type="checkbox" /></td>');
    that.headerNames.map(function (label) {
        var newlabel = label.replace(' ', '');
        var labelData = item[newlabel];
        tr.append('<td>' + labelData + '</td>');
    });
    console.log(tr); // [tr#66, jquery: "1.11.1", constructor: function, selector: "", toArray: function, get: function…] //i require all trs became a single output
    return tr;
});

console.log(this.tbody);

Upvotes: 1

Views: 509

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Try to return a dom object reference from the map handler then pass the array to jQuery and try

var tbody = this.tableData.map(function (item, index) {
    var tr = $('<tr />', {
        id: item.ID
    });
    tr.append('<td><input class="selectRow" type="checkbox" /></td>');
    that.headerNames.map(function (label) {
        var newlabel = label.replace(' ', '');
        var labelData = item[newlabel];
        tr.append('<td>' + labelData + '</td>');
    });
    console.log(tr); // [tr#66, jquery: "1.11.1", constructor: function, selector: "", toArray: function, get: function…] //i require all trs became a single output
    return tr.get(0);
});

this.tbody = $(tbody)

Demo: Fiddle, Problem

Upvotes: 2

Related Questions