Keeping order of populated DOM same as object order

Question

I have data-set which is ordered at this format

  '10': '1',
  '10-30': '0',
  '11': '7',
  '11-30': '0',
  '12': '1'

Now I want to populate some element exactly bases on this order from 10 to ... 12, but I don't know why the 12 is placing at second step. My demo code is below. Why is this happening?

var data = {
  '10': '1',
  '10-30': '0',
  '11': '7',
  '11-30': '0',
  '12': '1'
};

for (var i = 0; i < Object.keys(data).length; i++) {
  $('.btn-group').append("<button class='btn btn-secondary'>" + Object.keys(data)[i] + "</button>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="Basic example">
</div>

Hi Gerardo, the post that you added here is just explaining the reason and not offering any solution to fix this! please remove your duplicate from this post as I am looking for an answer for this. — Behseini, Sep 05 '19 at 03:31
Hello Behseini, I added two duplicate targets, which explain exactly the issue here: objects have no key order. The first link even explains the behaviour of `Object.keys` that you see here. The fact that the duplicate targets offer no solution (because there is none) does not invalidate closing this as a dupe. You can edit your question acknowledging this (objects cannot guarantee keys' order) and ask for an alternative solution... for such an edit I agree that the question should be reopened. — Gerardo Furtado, Sep 05 '19 at 03:46
Just as a complement to my comment above, your question is quite clear: *"but I don't know why the 12 is placing at second step ?! Can you please take a look at this demo and let me know why this is happening"*. You're asking **why**. The duplicate targets explain why. — Gerardo Furtado, Sep 05 '19 at 03:51

EternalHour · Accepted Answer · 2019-09-05T03:49:06.350

0

The questions Gerardo mentioned will explain the reason why this is happening. But if you're looking for a way to put them back in order use sort().

var data = {
  '10': '1',
  '10-30': '0',
  '11': '7',
  '11-30': '0',
  '12': '1'
};

var sorted = Object.keys(data).sort();

for (var i = 0; i < sorted.length; i++) {
  $('.btn-group').append("<button class='btn btn-secondary'>" + sorted[i] + "</button>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="Basic example">
</div>

edited Sep 05 '19 at 03:49

answered Sep 05 '19 at 03:34

EternalHour

8,308
6
38
57

What if the object literal has a different key order? – Gerardo Furtado Sep 05 '19 at 03:53
I don't quite follow your question. The sort method arranges them in sequence no matter what order they're in. – EternalHour Sep 05 '19 at 04:10
But that's not what OP wants. OP wants the keys in the sequence they are in the object literal (as the title says, *"same as object order"*). The fact that `sort()` worked for that sequence is just a coincidence. – Gerardo Furtado Sep 05 '19 at 04:11
I see what you're saying, I incorrectly assumed OP wanted to keep them in sequence.. Their dilemma may be that they are rearranged from the initial order. In that case, my answer isn't any help. – EternalHour Sep 05 '19 at 04:15
Just for you to see that this was an unfortunate coincidence: try `console.log(['9', '9-30', '10', '10-30', '11', '11-30', '12'].sort())`. – Gerardo Furtado Sep 05 '19 at 04:20
Yeah looks like this won't work. If the keys weren't strings, it could be done. But the ranges really complicate any type of sorting. Good catch there. – EternalHour Sep 05 '19 at 04:47

Keeping order of populated DOM same as object order

1 Answers1