How to work with js arrays, finding and grouping items?

Question

Googled around a fair bit but couldn't wrap my head around how to deal with this problem.

I have/plan a list of items.

var list1 = [
  [141,'AAA', 'A Group'],
  [262,'BBB', 'B Group'],
  [345,'CCC', 'B Group'],
  [136,'DDD'],
  [095,'EEE', 'A Group'],
  [175,'FFF'], and so on...
];

My goal is to print these items. Groups first, in alphabetical. Groupless after that.

All items in alphabetical.

Final result would be something like:

<div>

<h2>A Group</h2>
<ul class="group">
    <li>
        <img src="/141">
        <h3>AAA</h3>
    </li>
    <li>
        <img src="/095">
        <h3>EEE</h3>
    </li>
</ul>

<h2>B Group</h2>
<ul class="group">
    <li>
        <img src="/262">
        <h3>BBB</h3>
    </li>
    <li>
        <img src="/345">
        <h3>CCC</h3>
    </li>
</ul>

<h2>No group</h2>
<ul class="non-group">
    <li>
        <img src="/136">
        <h3>DDD</h3>
    </li>
    <li>
        <img src="/175">
        <h3>FFF</h3>
    </li>
</ul>

</div>

Any thoughts on how to tackle this?

Found this, https://stackoverflow.com/a/7596924/543365

Fairly close to what I could use. Couldn't manage to bend it to my use though.

@tracevipin based on his referred link I think he was trying to figure something out working with `shift` and `unshift`. Off course for a multi-dimensional array that would result in some messy stack of checks to get it all working. — , Mar 19 '13 at 09:36
Please state exactly what kind of sorting you want. You want sorting inside each group. Or sorting the groups themselves by their name.. — wsdookadr, Mar 19 '13 at 10:20
I would like the groups in A-Z. The items, grouped or not, A-Z. — Xavio, Mar 19 '13 at 11:41

score 2 · Answer 1 · answered Mar 19 '13 at 09:23

I would suggest looking into underscorejs, but, if you wish to use pure javascript:

1.) Sort the list so the items with a group come first.

var i = 0,
    group_arr = [];
for (i = 0; i < list1.length; i++) {
    if (list1[i][2] !== undefined) {
        group_arr.append(list1.splice(i, 1)[0]);
    }
}

2.) Now all the items with a group are in group_arr and the ones without are in list1. We need to now sort group_arr so it is in alphabetical order by group:

group_arr.sort(function (item1, item2) {
    return (item1[2] > item2[2]) ? 1 : -1;
});

Note that we can sort group_arr based on any arbitrary condition. If you would like to sort alphabetically by the second entry, just index that in the comparator function passed into Array.prototype.sort.

3.) Now the items in group_arr are in alphabetical order by group and contain items that have a group. Items in list 1 have no group and are not sorted. You can now iterate through each of these arrays, create your DOM elements and then insert them.

Pure JS is not a requirement :) – Xavio Mar 19 '13 at 11:52 — Xavio, Mar 19 '13 at 11:52

score 0 · Answer 2 · answered Mar 19 '13 at 09:28

Vinay's answer is great. Something like this should work too:

var list1 = [
    [141,'AAA', 'A Group'],
    [262,'BBB', 'B Group'],
    [345,'CCC', 'B Group'],
    [136,'DDD'],
    [095,'EEE', 'A Group'],
    [175,'FFF']
];

var list1_new = list1.sort(function(a, b){
    if (a[2] == b[2]) {
        return 0; // Do nothing
    }

    if (a[2] > b[2]) {
        return 1; // Put a AFTER b
    }

    if (a[2] < b[2]) {
        return -1; // Put a BEFORE b
    }
});

console.log(list1_new);

You could re-run the sort() function to handle the other values too after the index 2 is checked (Groups), to sort them all out after one and another.

Good luck!

score 0 · Answer 3 · answered Mar 19 '13 at 09:31

0

I agree, good answer by Vinay, I would have suggested underscore as well and made you a fiddle.

var groups = _.filter(list1,function(entry){
    return entry.length == 3;
});

var groupsSorted = _.sortBy(groups,function(entry){
    return entry[2] + entry[1]; //sort by group name and second element
});

answered Mar 19 '13 at 09:31

mindandmedia

6,800
1
24
33

The nice thing about what `sort()` comparison does (based on your first check if the length is equal to 3), is that `undefined == undefined`, making it no real worry using `a[2] == b[2]` to see if they both don't have a 3rd index key. Good answer tho, love it! :) – Mar 19 '13 at 09:34
That's quite neat, and would just need grouping. – Xavio Mar 27 '13 at 09:31

How to work with js arrays, finding and grouping items?

3 Answers3