sort dynamic list from two dimensional array

Question

I am kind of new to Javascript and jQuery, but I will try to explain my problem. I've made a simple page with one textfield (movie name) and one dropown (grade the move 1-5). When a user clicks the button "add movie" these values are then put into an array which is pushed to another array so that the array looks like this: [[grade, "moviename"]]. I then dynamically create: <li> "moviename" <span> "grade" </span> </li> and the movienamne and grade is presented at the page as a list element. This works fine but now I want to have two buttons that sort the list of li elements by highest and lowest grade...

[
    [
        5,
        ”movie name1”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ]
]

If the list looks like the above I want for example the list to appear as this if you press sort by lowest:

[
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        5,
        ”movie name1”
    ]
]

I have tried to make a function that sorts the array and then removes the current li elements and then prints out the new list but then all the values just gets into one list element. How do I get the separate values of the array and then print each of the values as list elements? Or, if its possible to just sort the list directly without removing it? What I'm trying to to is to sort the list by the number presented in the span element inside the list element. Does someone have any idea how to do this?

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() 
{
    $("#filmerna ul li").remove();
    betyg_array.sort(function(a,b){return b-a});
    var film = betyg_array;
    var grade = betyg_array;
    var element = '<li class="lista">' + film + '<span class="betyg">'+ grade +'</span></li>';
    film_list.append(element);

But it of course results in that the whole array gets into one list element I want the specifik values to a specifik list element and to have it sorted by the number in the span element...

    var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();

button_high.click(function() {

    $list = $("#filmerna ul");
    $("#filmerna ul li").remove();

    betyg_array.sort(function(x,y){return y[1]-x[1]});

$.each(betyg_array, function() {
    $nyFilm = $("<li />");
    $nyFilm.attr("class", "lista")
    $nyFilm.text($(this)[0]);

    $nyBetyg = $("<span />");
    $nyBetyg.attr("class", "betyg");
    $nyBetyg.text($(this)[1]);

    $nyBetyg.appendTo($nyFilm);
    $nyFilm.appendTo($list);
});

});

please post the code of the function you tried to make :D – Naryl Mar 07 '13 at 15:58 — Naryl, Mar 07 '13 at 15:58

talemyn · Answer 1 · 2013-03-07T20:10:51.203

1

Okay, based on your original JS, I think this should do it for you . . .

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() {
    $list = $("#filmerna ul");
    $list.empty();

    betyg_array.sort(function(a,b){return b-a});

    $.each(betyg_array, function() {
        $newMovie = $("<li />");
        $newMovie.attr("class", "lista")
        $newMovie.text($(this)[1]);

        $newGrade = $("<span />");
        $newGrade.attr("class", "betyg");
        $newGrade.text(new Array($(this)[0] + 1).join('*'));

        $newGrade.appendTo($newMovie);
        $newMovie.appendTo($list);
    });
});

There are more compact ways to add those <li> elements, but I wanted to make sure it was clear.

edited Mar 07 '13 at 20:10

answered Mar 07 '13 at 16:11

talemyn

7,822
4
31
52

I know hw to sort the array, but not to get the specific values from it and append to each list elemensts... – spovell Mar 07 '13 at 16:24
Okay . . . I misread the issue. In that case, Naryl is right. We really need to see your HTML code to give you a good answer. – talemyn Mar 07 '13 at 16:30
the html is really nothing, the list element is created each time you press the button "add movie" then the list element with the movie name and grade typed in is presented in at the page... the html that is relevant is only a emty
– spovell Mar 07 '13 at 16:36
Okay, seeing your JS code, I think I have a better ideal for what you are dealing with . . . give me a second to update my answer. – talemyn Mar 07 '13 at 16:41
So there isn't anyway to sort the list as it is? witout removing it and then appending it again? – spovell Mar 07 '13 at 17:41
Well I suppose you could . . . this thread here has something like that: http://stackoverflow.com/questions/1535744/sort-unordered-list-with-javascript However, in the end, I'm not sure that it would buys you much . . . you still have to remove and re-add elements to get them in the right order in the list. I'm not sure how that is any better then simply removing them all and re-adding them in the order that you want. – talemyn Mar 07 '13 at 18:13
I tried it now and what it does is only to reverse the order of the list... any idea why? also it doesn't remove the existing list just prints another under it in reversed order... – spovell Mar 07 '13 at 18:49
Did you add `$list.empty;` before you start adding in the new values? – talemyn Mar 07 '13 at 19:23
it was something with the .empty and the sorting funktion that was wrong. dont know why, should have worked I think... – spovell Mar 07 '13 at 19:34
Oops . . . forgot the `()` after `empty` . . . updating my answer. – talemyn Mar 07 '13 at 19:36
Can i also ask if its possible to change the number in the list that represents the grade to show as *, **, ***, ****, ***** instead of 1,2,3,4,5? beacause I cant have stars in the value because its not a number... – spovell Mar 07 '13 at 19:48
I supose I need a loop that loops through the span elements and changes the numbers to x amount of stars? or am I thinking right? – spovell Mar 07 '13 at 19:51
Updated the answer with the "star" solution . . . replaced `$newMovie.text($(this)[0]);` with `$newGrade.text(new Array($(this)[0] + 1).join('*'));`. – talemyn Mar 07 '13 at 20:12
ok, havent tries it yet but isnt join method going to put the number and stars together? I want to replace the number with star, but I think I can figure it out now, thank you for the help! – spovell Mar 07 '13 at 20:27
The join isn't joining the stars to the number . . . it's joining the stars to a new (empty) array that has a length based on the number. – talemyn Mar 07 '13 at 20:39
ok but what it does fo me is copying the moviename and places it next to the number(grade)... isnt there some anonymus function you can use to replace every number in the span element with x amount of stars? you would think that it couldnt be that hard, tried the replace method but it didnt work either... how would you use replace method in a loop? – spovell Mar 07 '13 at 21:01
You'd need to show your code . . . I tested that method before I posted it and it was doing just what you asked. You also might want to start thinking about another thread . . . we've moved awfully far away from your original question. :) – talemyn Mar 07 '13 at 21:08
ok I will do that, I'm prety mutch finished for today anyway... thanks anyway, by the way the code for stars need to be in another function anyway because the function you helped me with is only for sorting the list with a button and that works like a charm :) – spovell Mar 07 '13 at 21:17

sort dynamic list from two dimensional array

1 Answers1