CODEWITHSUNDEEP
javascriptjquerymultidimensional-array
spovell
spovell

Reputation: 133

sort dynamic list from two dimensional array

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);
});

});

Upvotes: 0

Views: 314

Answers (1)

talemyn
talemyn

Reputation: 7950

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.

Upvotes: 1

Related Questions