Order element with a for..in and each loop

Question

I tried to figure out how I can order items, inside a for..in loop, inside another each loop, looping through my order's array to respect.

I have an object with my data :

dataObj = {
    "sites":{
        "dribbble":{
            // ID = 0
            "username":"JeremDsgn"
        },
        "behance":{
            // ID = 1
            "username":"JeremDsgn"
        },
        "cinqcentpx":{
            // ID = 2
            "username":"jeremdsgn"
        }
    },
    "order":["1","2","0"]
};

Actually I add the id for each items in the display loop, but can it be better to add the id in the object ?

So after, I tried to display my items with the order's array to respect.

var index = 0;

for (var site in dataObj.sites) {
    var itemList = '<li id="' + index + '">' + site + '</li>';

    $.each(dataObj.order, function(i, id) {
        console.log(i, id);
        $(itemList).appendTo('.list-social .social-wrapper');       
    });

    index++;
}

But I duplicate my site 3 times, because, at this time I have 3 elements on my dataObj.sites object.

So how can I do to display my itemList with the good order? The final result should be :

<div class="list-social">
    <ul class="social-wrapper">
        <li id="1">behance</li>
        <li id="2">cinqcentpx</li>
        <li id="0">dribbble</li>
    </ul>
</div>

FIDDLE : http://jsfiddle.net/JeremDsgn/XhnyS/

It's the for-in statement that's at issue. That's the part that doesn't guarantee the order. Instead use a for statement (or $.each) to iterate the dataObj.order Array, but instead of giving it indices, give it the name of each dataObj.sites property in the order you want to visit it. — cookie monster
– cookie monster, Commented Jun 14, 2014 at 20:52
... order:["behance","cinqcentpx","dribbble"] and then you'll want to add the ID to each object too. — cookie monster
– cookie monster, Commented Jun 14, 2014 at 20:54
It's isn't clear at all for me. Because actually I already loop through dataObj.order with a each loop. — jeremybarbet
– jeremybarbet, Commented Jun 14, 2014 at 21:01
...if the IDs are really meant to correspond to a zero-based index of each object, then an Array of Objects would seem to make much more sense. — cookie monster
– cookie monster, Commented Jun 14, 2014 at 21:03

Collin Green · Accepted Answer · 2014-06-14 21:03:23Z

1

I'm not positive what you are trying to do, but maybe this fiddle helps? http://jsfiddle.net/XhnyS/7/

Instead of using indexes and order list of stringed numbers, I simply changed the order list to the site keys themselves, then created one list item and added it to every .social-wrapper found.

dataObj = {
    "sites":{
        "dribbble":{
            "username":"JeremDsgn"
        },
        "behance":{
            "username":"JeremDsgn"
        },
        "cinqcentpx":{
            "username":"jeremdsgn"
        }
    },
    "order":["cinqcentpx", "behance", "dribbble"]
};

for (var i = 0; i < dataObj.order.length; i++) {
    var siteName = dataObj.order[i];
    var itemList = $('<li/>').attr('id', i).text(siteName + ': ' + dataObj.sites[siteName].username);
    $(itemList).appendTo('.list-social .social-wrapper');
}

Edited to actually answer the question :)

edited Jun 14, 2014 at 21:03

answered Jun 14, 2014 at 20:56

Collin Green

2,19614 silver badges12 bronze badges

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

2 Comments

cookie monster Over a year ago

You're not using the dataObj.order list. The Object.keys() doesn't guarantee any particular order, just like for-in.

jeremybarbet Over a year ago

I should have only three li item, the other are duplicates and I didn't know how to don't repeat them. And I would rather keep number for order if possible.

Indranil Mondal · Accepted Answer · 2014-06-14 21:06:33Z

0

Try this. It worked.

   $.each(dataObj.order, function(i, id) {
    console.log(i, id);
    var index = 0;  
    for (var site in dataObj.sites) {
       console.log(index);
        if(index==id){
          console.log("equal",id,index,site);
          var itemList = '<li id="' + index + '">' + site + '</li>';
          $(itemList).appendTo('.list-social .social-wrapper');
          break;
          }
    index++;
    }
});

answered Jun 14, 2014 at 21:06

Indranil Mondal

2,8673 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Order element with a for..in and each loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related