javascript - Displaying letters and numbers in a grid while respecting a few (mostly sorting) criteria -

i displaying grid of products (items sell on site).

the logics of grid item display is:

• 10 items maximum per row.

• rows must consist of either numbers or letters (no mix)

• items must in order (whether numbers or letters).

• letters @ end of grid.

• when rows consist of numbers, numbers within same "ten" allowed on same row. example if have numbers 3,1,2,23,15,11, code group these numbers like: [1,2,3], [11, 15], [23]. (then in code display items appropriately in grid, [1,2,3] goes on row 1, [11, 15] on row 2 etc.

let's array (category.products, in code) looks like:

[{     style_code: '1' },{     style_code: '12' },{     style_code: '2' },{     style_code: '11' },{     style_code: 'd' },{     style_code: 'a' },{     style_code: 'b' },{     style_code: 'cab' },{     style_code: 'caa' },{     style_code: 'f' },{     style_code: 'g' },{     style_code: 'h' },{     style_code: 'i' },{     style_code: 'j' },{     style_code: 'k' }] 

the groups like: [1,2], [11,12], [a, b, caa, cab, d, f, g, h, i, j], [k]

the code, right now, groups numbers correctly.

however when comes letters, code puts them in same group -- not desired behaviour, , need correcting code make work wanted.

function dynamicsort(property) {     var sortorder = 1;     if(property[0] === "-") {         sortorder = -1;         property = property.substr(1);     }     return function (a,b) {         var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;         return result * sortorder;     } }  // grouping style codes function groupby(ary, keyfunc) {     var r = {};     ary.foreach(function (x) {         var y = keyfunc(x.style_code);         r[y] = (r[y] || []).concat(x);     });     return object.keys(r).map(function (y) {         return r[y];     }); }  category.products.sort(dynamicsort('style_code'));  if (category.products.length > 0) {     var sortedproductsarray = groupby(category.products, isnan);      if (sortedproductsarray[1]) {         sortedproductsarray = [].concat(             groupby(sortedproductsarray[0], function (x) { return math.floor(x / 10) }),             [sortedproductsarray[1].sort()]         );     } else {         sortedproductsarray = groupby(sortedproductsarray[0], function (x) {             // if (!isnan(x)) {                 return math.floor(x / 10);             // }             // return x;         });     } } 

basically apply elements new property group, holds information sort order (as string):

style_code group comment ---------- ----- ---------------------------------       1      0   integer part of log10(style_code)      11      1   integer part of log10(style_code)            l   small letter l not numeric strings 

then sort data group , style_code. last point reassamble sorted group in pages. new page applyed if first page or group has changed or length of page has reached 10.

if needed, may delete property group elements in paged code:

function deletegroup(a) {     if (array.isarray(a)) {         a.foreach(deletegroup);     } else {         delete a.group;     } } paged.foreach(deletegroup); 

now working example:

function getpaged() {      data.foreach(function (a) {          a.group = isfinite(a.style_code) ? '' + (math.log(a.style_code) / math.log(10) | 0) : 'l';      });      data.sort(function (a, b) {          return a.group.localecompare(b.group) || a.style_code.localecompare(b.style_code);      });      return data.reduce(function (r, a) {          var = r.length - 1,              j = ~i && r[i].length - 1;          if (!~i || r[i][j].group !== a.group || j === 9) {              r.push([]);          }          r[r.length - 1].push(a);          return r;      }, []);  }    var data = [          { style_code: '1' },          { style_code: '12' },          { style_code: '2' },          { style_code: '11' },          { style_code: 'd' },          { style_code: 'a' },          { style_code: 'b' },          { style_code: 'cab' },          { style_code: 'caa' },          { style_code: 'f' },          { style_code: 'g' },          { style_code: 'h' },          { style_code: 'i' },          { style_code: 'j' },          { style_code: 'k' }      ],      paged = getpaged();    document.write('<pre>' + json.stringify(paged, 0, 4) + '</pre>');