CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
3gwebtrain
3gwebtrain

Reputation: 15293

How to append the elements from array to container?

I am getting json objects from backend by shuffled. when It reach front end, i am looping the object and placing to array by it's id value. so I re-sorted them properly. But I am not able to append the elements what i save to array.

here is my example:

HTML : <div id="selectors"></div>

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

var elements = [];

$.each(object,function(index, obj){
    var num  = parseInt(obj.id)
                elements[num] = $('<select></select>', {'id':num});
});

$('#selectors').append($(elements));

Any one suggest me the correct approach or tell me the best way.

Here is the Live Demo

I am looking the output should be :

<div id="selectors">
<select id="1"></select><select id="2"></select><select id="3"></select><select id="4"></select>

Upvotes: 1

Views: 453

Answers (6)

Tejas Savaliya
Tejas Savaliya

Reputation: 638

Try this...

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

var elements = [];
object.sort(function(obj1, obj2) {
    // Ascending: first id less than the previous
    return obj1.id - obj2.id;
});

var sel = $('<select>').appendTo('#selectors');
$.each(object, function(i, option){

 sel.append($("<option>").attr('value',option.id).text(option.name));
});

Check this link : http://jsfiddle.net/8UKgr/11/

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8161

I think you want sorted array. So for this first sort object array using jquery .sort().

object = object.sort(function (a, b) {  if (a.id< b.id) {
        return -1;
    }
    else if (a.id> b.id) {
        return 1;
    }
    return 0; });

And then get the array items one by one using .each()

Try this following code:

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

object = object.sort(function (a, b) { return a.id >= b.id ? 1 : -1; });

var elements = $();
$.each(object,function(index, obj){    
 $('#selectors').append($('<select></select>', {'id':obj.id}));
});

Working Example

Or you can also use HTML Elements Object Collection. Create an empty collection $().

var object = [
    {"name":"name4", "id" : 4},
    {"name":"name1", "id" : 1},
    {"name":"name3", "id" : 3},
    {"name":"name2", "id" : 2}
    ]

object = object.sort(function (a, b) { return a.id >= b.id ? 1 : -1; });

var elements = $();
$.each(object,function(index, obj){    
    elements = elements.add($('<select></select>', {'id':obj.id}));
});
$('#selectors').append($(elements));

Working Example

Upvotes: 0

Andrey
Andrey

Reputation: 161

Or this...

var fragment = document.createDocumentFragment();

object
.sort(function(a,b){return a.id > b.id})
.map(function(el){
    var select = document.createElement('select');
    select.id = el.id;
    fragment.appendChild(select);
});

$('#selectors').append(fragment);

more code but better performance. JSFIDDLE

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

JSFiddle: http://jsfiddle.net/TrueBlueAussie/8UKgr/1/

Use an empty jQuery object/collection $() and add elements to it.

var elements = $();

$.each(object,function(index, obj){
    var num  = parseInt(obj.id)
    elements = elements.add($('<select></select>', {'id':num}));
});

$('#selectors').append(elements);

Update (+ sorting): http://jsfiddle.net/TrueBlueAussie/8UKgr/6/

Uses jQuery sortElements extension from here: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('#selectors').append(elements);
elements.sortElements(function (o1, o2) {
    return o1.id >= o2.id ? 1 : -1;
});

Upvotes: 0

George
George

Reputation: 36784

You'd be best of using map(), which returns jQuery objects anyway. You can then go on to sort() your select boxes, by their ids:

var elements = $.map(object, function(v){
    return $('<select></select>', {'id':parseInt(v.id)});
}).sort(function(a,b){
    return a.prop('id') > b.prop('id');
});

$('#selectors').append(elements);

JSFiddle

Upvotes: 2

K.K.Agarwal
K.K.Agarwal

Reputation: 856

try this...

$.each(object,function(index, obj){
    var num  = parseInt(obj.id)

    $('#selectors').append($('<select />').attr('id',num));
});

you can check it here ..http://jsfiddle.net/kka284556/8UKgr/2/

Upvotes: 0

Related Questions