JS: How to update list items positions based on a new order/"list"?

Question

I have a list with items and want to update the item's order based on an "array" (it proved to be an object, not an array) with ids in the updated order.

It's "new_order" here:

$.post('/fetch/get_list', function(new_order)
{
     // How should I handle new_order here?
}

How do I change the current list order to the "new_order"?

One idea would be to retrieve the entire list of HTML and all created with php. But I can't do like that in this case. The HTML that the current list consists of must be retained.

So, I just want to update the order of the items in the current printed list.

Hope you understand how I mean. :)

Since I don't know how to achieve this, my attempts to solve this problem has been to do searches on how to solve this problem. But most of the results is only about how to change the sorting with up and down buttons and how to change the position of an item of which you already know where (by index) it will end up, with after() or prepend(). — Peter Westerlund, Jan 24 '14 at 15:33
Are you trying to prevent re-rending the `li` elements? What does the html look like? — Ilia Choly, Jan 24 '14 at 15:35
How do you mean? I'm trying to change order of the list items. Not with buttons, but with an updated list from the database. — Peter Westerlund, Jan 24 '14 at 15:37
Good question! Seems like I forgot to mention that. The items are wearing this: `

Ilia Choly · Accepted Answer · 2014-01-24T16:15:42.057

3

Something like this should work. JsFiddle

var reorder = function (new_order) {

    // the list we're reordering
    var $list = $("#the-list");

    // ordered li elements will be placed here
    var ordered = [];

    // detach the li elements from the list
    var $items = $list.find("li").detach();

    // sort them using the order array
    $items.each(function (i, item) {
        var id = parseInt($(item).data("id"));
        var pos = new_order.indexOf(id);
        ordered[pos] = item;
    });

    // append the ordered li elements to the list
    $(ordered).appendTo($list);
};

Note: This assumes that every li in the list has a corresponding id in the new_order array.

edited Jan 24 '14 at 16:15

answered Jan 24 '14 at 16:04

Ilia Choly

18,070
14
92
160

Hmm I get "Uncaught TypeError: Object # – Peter Westerlund Jan 24 '14 at 16:24
That's not a list/array, it's an Object. – Ilia Choly Jan 24 '14 at 16:25
I thought it was. So what is it then? Is it possible to use? ... Well yes, I thought object lists could be referred to as list. However, Is it possible to use the object? – Peter Westerlund Jan 24 '14 at 16:27
Okay, I'm just trying to express so that you'll understand what the problem is. I wrote "array", I knew it wasn't actually an array. But if I had written just "list", you might have thought that I meant the ul list. And also, English is not my first language. Well, I didn't have an eye on what kind of list new_order was. Apologies for that. Too bad you don't want to help anymore. – Peter Westerlund Jan 24 '14 at 17:25
Again, it's not any type of array/list/sequence. It's an object/hashmap/keyvalue/dictionary. They're completely different. I have no interest in helping someone who hasn't even put in the effort of learning fundamental concepts before asking other people to write code for them. – Ilia Choly Jan 24 '14 at 17:47
Okay, end of discussion. But now matter what you think I actually now what an array and an object is. I didn't thought it would make any difference to the answer, and I hadn't found out what type "new_order" was. However, I will thank you for the help I received. I may find out how to go from here, I hope. And I'll be back with the solution. – Peter Westerlund Jan 24 '14 at 18:23
Have now got the `ordered` array to work. It contains the new list. But `$(ordered).appendTo($list);` just empties the current list. – Peter Westerlund Jan 24 '14 at 20:21
Okay, it's the detach() that makes it empty. But the appendTo() doesn't succeed. – Peter Westerlund Jan 24 '14 at 22:57
Do a `console.log` on the `new_order` and add it to the question. – Ilia Choly Jan 25 '14 at 05:24
Have done that. Have checked everything in all places. Everything looks good in console.log. And have looped trough new_order like this `for (key in new_order) { ++j; if (key == id) { ordered[j] = item; break; } }` to fill ordered array. The latest thing I learned in my troubleshooting is that it seems to be important that all data id really match the current list and the new one -otherwise the list disappear. Discovered that when I played with your jfiddle code. It makes me wonder if it somewhere doesn't match. My list consists a lot of items, and lots of code. So it takes some time to debug. – Peter Westerlund Jan 25 '14 at 09:51
Update: I have now found a bug that can be part of the latest mess. It has been shown that Chrome reorders after json_encode. So the new list has been in wrong order. Could be good to know for them who doesn't know that. – Peter Westerlund Jan 25 '14 at 12:56
Have now finally got it to work! After some troubleshooting. But I learned some new things along the way. This answer solved the question. – Peter Westerlund Jan 25 '14 at 13:33
When iterating an object make sure to use `hasOwnProperty` like [this](http://jsfiddle.net/2kAHM/) – Ilia Choly Jan 25 '14 at 21:20

JS: How to update list items positions based on a new order/"list"?

1 Answers1