CODEWITHSUNDEEP
javascriptjqueryarrayssorting
Hagbard
Hagbard

Reputation: 575

Sorting an array with HTML tags

I have an array being generated in this format called statecontent:

["<option value="Texas" data-code="TX">Texas - TX</option>", 
"<option value="Washington" data-code="WA">Washington - WA</option>", 
"<option value="Maryland" data-code="MD">Maryland - MD</option>""]

I'm using this array to populate a drop down box

var statecombo = $('#stateCombobox');    
statecombo.append(statecontent.join(''))

However none of the normal sorting methods I'm using are working.

Usually I would do:

var target = '#stateCombobox'
sortdropdown(target) 

 function sortdropdown(target) {
         $(target).html($(target + " option").sort(function (a, b) {
                 return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
         }));
 }

This doesnt work though, any idea how I could sort with this kind of format?

Tried this and this with no success I guess because they are in html tags?

Not sure how sorting before appending would work, as i generate it like:

for (var j = 0; j < obj[k].countries[i].states.length; j++) {                                                     
             var item = '<option value="' + obj[k].countries[i].states[j].state + '" data-code="' + Scode + '">' + obj[k].countries[i].states[j].state;
             item = item + '</option>';
             statecontent.push(item);
     };

Upvotes: 1

Views: 263

Answers (4)

PeterKA
PeterKA

Reputation: 24638

You can sort the elements before adding them to the DOM and then add them; that should work.

var statecontent = ['<option value="Texas" data-code="TX">Texas - TX</option>', 
'<option value="Washington" data-code="WA">Washington - WA</option>', 
'<option value="Maryland" data-code="MD">Maryland - MD</option>'];

statecontent.sort(function(a,b) {
    return $(a)[0].text == $(b)[0].text ? 0 : $(a)[0].text < $(b)[0].text ? -1 : 1;
});

And you also need to use single quotes for your array elements as you are already using the double quotes for the attributes, or at least escape it in the attributes.

WORKING JSFIDDLE DEMO

Upvotes: 1

plalx
plalx

Reputation: 43718

Most of the time, when you find yourself having to query the DOM or HTML strings for data, it's a good indicator that there's something wrong in the design. Always try to have a clean seperation between data and your presentation's code.

Simple exemple: http://jsfiddle.net/43NED/2/

!function () {
    var states = [
        { name: "Texas", code: "TX" },
        { name: "Washington", code: "WA" },
        { name: "Maryland", code: "MD" }
    ];

    populateStates(sortBy(states, 'name'));


    function populateStates(states) {
        var optionsFrag = document.createDocumentFragment();

        states.forEach(function (state) {
            optionsFrag.appendChild(new Option(state.name, state.code));
        });

        $('#stateCombobox').append(optionsFrag);
    }

    function sortBy(states, key) {
        return states.sort(function (a, b) {
            return a[key] < b[key]? -1 : +(a[key] > b[key]);
        });
    }
}();

Upvotes: 1

manji
manji

Reputation: 47978

Or you can detach the 'option' elements, do the sort then reappend to the 'select' element: 

$(target + ' option').detach().sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}).appendTo(target);

Demo (jsfiddle)

but sorting the original array before building the dom elements is cleaner:

// sort states
var sortedStates = obj[k].countries[i].states.sort();

for (var j = 0; j < sortedStates.length; j++) {
    var item = '<option value="' + sortedStates[j].state 
                + '" data-code="' + Scode + '">' + sortedStates[j].state;
    item = item + '</option>';
    statecontent.push(item);
};

Upvotes: 0

agmcleod
agmcleod

Reputation: 13621

var tags = ['<option value="Texas" data-code="TX">Texas - TX</option>', 
'<option value="Washington" data-code="WA">Washington - WA</option>', 
'<option value="Maryland" data-code="MD">Maryland - MD</option>'];

var pattern = new RegExp("<[^>]*>", "g");

tags.sort(function (a, b) {
    return a.replace(pattern,"") > b.replace(pattern, "") ? 1 : -1 ;
});

var s = $('#s');
s.append(tags.join());

I like the other answer because it doesnt strip out HTML to compare, but you need them as html elements for that to work.

Upvotes: 0

Related Questions