Sort array question

[yeti349]

Hi, I'm using the following code to retrieve data from an xml file and
populate a javascript array. The data is then displayed in html table
form. I would like to then be able to sort by each column. Once the
array elements are split, what is the best way to sort them? Thank you.

//populate data object with data from xml file.
//Data is a comma delimited list of values
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

//split up values for each element
var o = jsData[0];
o.lib = o.lib.split(",");
o.doc = o.doc.split(",");
o.com = o.com.split(",");

 

[Lee]

(e-mail address removed) said:

Hi, I'm using the following code to retrieve data from an xml file and
populate a javascript array. The data is then displayed in html table
form. I would like to then be able to sort by each column. Once the
array elements are split, what is the best way to sort them? Thank you.

//populate data object with data from xml file.
//Data is a comma delimited list of values
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

//split up values for each element
var o = jsData[0];

o.lib = o.lib.split(",").sort();
o.doc = o.doc.split(",").sort();
o.com = o.com.split(",").sort();

 

[Thomas 'PointedEars' Lahn]

[...] I would like to then be able to sort by each column. Once the
array elements are split, what is the best way to sort them? [...]

//populate data object with data from xml file.
//Data is a comma delimited list of values
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

//split up values for each element
var o = jsData[0];
o.lib = o.lib.split(",");
o.doc = o.doc.split(",");
o.com = o.com.split(",");

Since the table implies a dependency of all data in one row, it
does not make sense to sort each column array independently.

You need a different data structure, then you can apply a comparator:

// make each row an object as element of an array.
var a = [];
for (var i = 0, len = o.lib.length; i < len; i++)
{
a.push({lib: o.lib, doc: o.doc, com: o.com});
}

// comparator
function sortByLibAsc(a, b)
{
if (a && b)
{
if (a.lib < b.lib)
{
return -1;
}
else if (a.lib > b.lib)
{
return 1;
}
}

return 0;
}

a.sort(sortByLib);


PointedEars

 

[Thomas 'PointedEars' Lahn]

// comparator
function sortByLibAsc(a, b)
{
[...]
}

a.sort(sortByLib);

a.sort(sortByLibAsc);

of course.


PointedEars

 

[yeti349]

thank you for the help Pointed, I'm getting closer.

How can I get my data to look like this...

jsData[0] = {lib:"string1",doc:"01",com:"blah"};
jsData[1] = {lib:"string2",doc:"02",com:"blah"};
jsData[2] = {lib:"string3",doc:"03",com:"blah"};
jsData[3] = {lib:"string4",doc:"04",com:"blah"};
jsData[4] = {lib:"string5",doc:"05",com:"blah"};
jsData[5] = {lib:"string6",doc:"06",com:"blah"};
jsData[6] = {lib:"string7",doc:"07",com:"blah"};

....from my data object that looks like this?

//this is how I extract the data, but I need it to be in the above
format
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

var o = jsData[0];
o.lib = o.lib.split(",");
o.doc = o.doc.split(",");
o.com = o.com.split(",");

Thanks.

 

[Thomas 'PointedEars' Lahn]

thank you for the help Pointed, I'm getting closer.

However, you should read and adhere to <http://jibbering.com/faq/#FAQ2_3>,

How can I get my data to look like this...

jsData[0] = {lib:"string1",doc:"01",com:"blah"};
jsData[1] = {lib:"string2",doc:"02",com:"blah"};
jsData[2] = {lib:"string3",doc:"03",com:"blah"};
jsData[3] = {lib:"string4",doc:"04",com:"blah"};
jsData[4] = {lib:"string5",doc:"05",com:"blah"};
jsData[5] = {lib:"string6",doc:"06",com:"blah"};
jsData[6] = {lib:"string7",doc:"07",com:"blah"};

...from my data object that looks like this?

//this is how I extract the data, but I need it to be in the above
format
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

var o = jsData[0];
o.lib = o.lib.split(",");
o.doc = o.doc.split(",");
o.com = o.com.split(",");

This will do nothing (well OK, it will create array objects with one
element). There is no way the data below can be transformed into the
data above. As I wrote before, you need to post _real_ input and
output data if one is to find a viable transformation algorithm.


PointedEars

 

[yeti349]

especially <http://www.jibbering.com/faq/faq_notes/clj_posts.html>, if you
desire my further help.

thanks for the hot tip!

As I wrote before, you need to post _real_ input and
output data if one is to find a viable transformation algorithm.

is this sufficient? This is as real as I can give you.

sadData[0] =
{lib:"string1,string2,string3,string4",doc:"01,02,03,04",com:"blah,blah,blah,blah"};


and this is the format I would like to change it to:

happyData[0] = {lib:"string1",doc:"01",com:"blah"};
happyData[1] = {lib:"string2",doc:"02",com:"blah"};
happyData[2] = {lib:"string3",doc:"03",com:"blah"};
happyData[3] = {lib:"string4",doc:"04",com:"blah"};

 

[Lee]

(e-mail address removed) said:

However, you should read and adhere to <http://jibbering.com/faq/#FAQ2_3>,
especially <http://www.jibbering.com/faq/faq_notes/clj_posts.html>, if you
desire my further help.

thanks for the hot tip!

As I wrote before, you need to post _real_ input and
output data if one is to find a viable transformation algorithm.

is this sufficient? This is as real as I can give you.

sadData[0] =
{lib:"string1,string2,string3,string4",doc:"01,02,03,04",com:"blah,blah,blah,blah"};


and this is the format I would like to change it to:

happyData[0] = {lib:"string1",doc:"01",com:"blah"};
happyData[1] = {lib:"string2",doc:"02",com:"blah"};
happyData[2] = {lib:"string3",doc:"03",com:"blah"};
happyData[3] = {lib:"string4",doc:"04",com:"blah"};

That still doesn't tell us how you want it sorted.
A correct answer wouldn't require any sort at all.

 

[RobG]

However, you should read and adhere to <http://jibbering.com/faq/#FAQ2_3>,
especially <http://www.jibbering.com/faq/faq_notes/clj_posts.html>, if you
desire my further help.

thanks for the hot tip!

As I wrote before, you need to post _real_ input and
output data if one is to find a viable transformation algorithm.

is this sufficient? This is as real as I can give you.

sadData[0] =
{lib:"string1,string2,string3,string4",doc:"01,02,03,04",com:"blah,blah,blah,blah"};


and this is the format I would like to change it to:

happyData[0] = {lib:"string1",doc:"01",com:"blah"};
happyData[1] = {lib:"string2",doc:"02",com:"blah"};
happyData[2] = {lib:"string3",doc:"03",com:"blah"};
happyData[3] = {lib:"string4",doc:"04",com:"blah"};

This will do the re-format, but not sort. I think Thomas' first post
will do that (but I haven't tried it). The original sadData array is
not modified, property names and values are stored in temporary arrays
is for convenience (shorter names, shallower access).


<script type="text/javascript">

var sadData = [
{
lib:"string1,string2,string3,string4",
doc:"01,02,03,04",
com:"blah,blah,blah,blah"
}
];

function processData(obj)
{
var prop; // Temp storage for property name
var oProps = []; // Store names of obj properties
var oVals = []; // Store values as arrays
var tArray = []; // Processed data

// Store property names & values converted to arrays
for ( prop in obj ){
oVals[oVals.length] = obj[prop].split(',');
oProps[oProps.length] = prop;
}

// Load property names & values into tArray
for (var i=0, m=oVals[0].length; i<m; ++i ){
tArray = {};

for (var j=0, n=oProps.length; j<n; ++j){
tArray[oProps[j]] = oVals[j];
}
}
return tArray;
}

/* What the result should look like
happyData[0] = {lib:"string1",doc:"01",com:"blah"};
happyData[1] = {lib:"string2",doc:"02",com:"blah"};
happyData[2] = {lib:"string3",doc:"03",com:"blah"};
happyData[3] = {lib:"string4",doc:"04",com:"blah"};
*/

function showObjData(obj)
{
var c, t = [];
var prop;
for (var i=0, m=obj.length; i<m; ++i){
t = 'obj[' + i + '] = {';
c = 0;
for (prop in obj){
if (c++ != 0) t += ',';
t += prop + ':"' + obj[prop] + '"';
}
t += '}';
}
alert(t.join('\n'));
}

var happyData = processData(sadData[0]);
showObjData(happyData);

</script>

 

[yeti349]

This will do the re-format, but not sort. I think Thomas' first post

will do that (but I haven't tried it). The original sadData array is
not modified, property names and values are stored in temporary arrays
is for convenience (shorter names, shallower access).

Excellent. Thank you Rob. I will implement this tomorrow and see if it
solves my problem.

 

[Thomas 'PointedEars' Lahn]

(e-mail address removed) wrote:
^^^^^^^^^^^^^^^^^^^^^^^^
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

thanks for the hot tip!

OK, I have to be blunt: Please provide proper attribution
as you can see in postings of other people in this thread.

As I wrote before, you need to post _real_ input and
output data if one is to find a viable transformation algorithm.

is this sufficient? This is as real as I can give you.

sadData[0] =
{lib:"string1,string2,string3,string4",doc:"01,02,03,04",com:"blah,blah,blah,blah"};


and this is the format I would like to change it to:

happyData[0] = {lib:"string1",doc:"01",com:"blah"};
happyData[1] = {lib:"string2",doc:"02",com:"blah"};
happyData[2] = {lib:"string3",doc:"03",com:"blah"};
happyData[3] = {lib:"string4",doc:"04",com:"blah"};

While Rob's approach seems viable, I find it too complicated and
inefficient. My advice for the time being is to perform both the
transformations I described in <and <one after another.
As for the first transformation, you do not need to overwrite your
original data:

var o = sadData[0];
var mediumData = {};
mediumData.lib = o.lib.split(",");
mediumData.id = o.id.split(",");
mediumData.com = o.com.split(",");

Then transform `mediumData' into `happyData' as described, and
apply any comparator you would like on `happyData'.


HTH

PointedEars

 

[Thomas 'PointedEars' Lahn]

This will do the re-format, but not sort. I think Thomas' first post
will do that (but I haven't tried it).

It will. Test it with `string5' instead of `string1', for example.
I re-included the comparator and its application here for convenience.

The original sadData array is not modified,

Same here.

property names and values are stored in temporary arrays is for
convenience (shorter names, shallower access).

What do you mean by "shallower access" here?

<script type="text/javascript">

var sadData = [
{
lib:"string1,string2,string3,string4",
doc:"01,02,03,04",
com:"blah,blah,blah,blah"
}
];

function processData(obj)
{
var prop; // Temp storage for property name
var oProps = []; // Store names of obj properties
var oVals = []; // Store values as arrays
var tArray = []; // Processed data

// Store property names & values converted to arrays
for ( prop in obj ){
oVals[oVals.length] = obj[prop].split(',');
oProps[oProps.length] = prop;
}

Iterating through the object properties more than one time is probably
faster than saving them in an array first and then iterate through that
array.

// Load property names & values into tArray
for (var i=0, m=oVals[0].length; i<m; ++i ){
tArray = {};

for (var j=0, n=oProps.length; j<n; ++j){
tArray[oProps[j]] = oVals[j];
}
}
return tArray;
}

[...]
function showObjData(obj)
{
var c, t = [];
var prop;
for (var i=0, m=obj.length; i<m; ++i){
t = 'obj[' + i + '] = {';
c = 0;
for (prop in obj){
if (c++ != 0) t += ',';
t += prop + ':"' + obj[prop] + '"';
}
t += '}';
}
alert(t.join('\n'));
}

var happyData = processData(sadData[0]);
showObjData(happyData);

</script>

As I said in <and as you
recognized, two transformations are necessary here. However, it
is still possible to increase efficiency and universality.

Compare:

var
sadData = [
{lib: "string1,string2,string3,string4",
doc: "01,02,03,04",
com: "blah,blah,blah,blah"}
],
o = sadData[0],
p,
mediumData = {},
maxLen = 0,
len;

for (p in o)
// this implies no order of properties; if order is important,
// one has to set up an appropriate algorithm, perhaps one using
// ["property1", "property2", "property3"]
{
mediumData[p] = o[p].split(",");

if (maxLen < (len = mediumData[p].length))
{
maxLen = len;
}
}

// formatted output
Object.prototype.toString = function()
{
var a = [];
a.push("\n{");
for (var p in this)
{
a.push(p, " = ", this[p], "\n");
}
a.push("}\n");
return a.join("");
}

// debugging
alert(mediumData);

var happyData = [];
for (var i = 0; i < maxLen; i++)
// or (var i = maxLen; i-- since it's sorted later anyway.
{
happyData = {};

for (p in o)
{
happyData[p] = mediumData[p];
}
}

// debugging
alert(happyData);

// comparator
function sortByLibAsc(a, b)
{
if (a && b)
{
if (a.lib < b.lib)
{
return -1;
}
else if (a.lib > b.lib)
{
return 1;
}
}

return 0;
}

// apply the comparator
happyData.sort(sortByLibAsc);

// debugging
alert(happyData);


Regards,
PointedEars

 

[RobG]

It will. Test it with `string5' instead of `string1', for example.
I re-included the comparator and its application here for convenience.


Same here.


What do you mean by "shallower access" here?

I meant using references lower down the the scope chain to reduce the
length of lookups (I think I only cut down one level anyway). Compare
with your:

o = sadData[0],


[...]

// Store property names & values converted to arrays
for ( prop in obj ){
oVals[oVals.length] = obj[prop].split(',');
oProps[oProps.length] = prop;
}

Iterating through the object properties more than one time is probably
faster than saving them in an array first and then iterate through that
array.

I think the two approaches are very similar - you store the values in a
single object that is a modified copy of the original (mediumData with
the values changed to arrays), I've used an intermediate step of
separate arrays for property names and values that are then used to
build the new object.

I like the elegance of your approach, I originally did it the same way
but was modifying the original object - I wanted to change that and used
arrays out of habit I suppose.


[...]

As I said in <news:[email protected]> and as you

For some reason I can't locate messages in Thunderbird using the message
ID. I'm sure it used to do it... there's a 'find message by id'
extension for the Mozilla news reader, maybe I'll change to that.


[...]

for (p in o)
// this implies no order of properties; if order is important,
// one has to set up an appropriate algorithm, perhaps one using
// ["property1", "property2", "property3"]
{
mediumData[p] = o[p].split(",");

if (maxLen < (len = mediumData[p].length))
{
maxLen = len;
}
}

An issue for the OP to address is what to do if there are a different
number of values in each comma-separated 'record' - should empty
elements be inserted? Is that allowed to occur? It seems to me the
original data structure is deficient, the relationship between items is
their position in the array rather than some explicit link (though that
would mean a bigger data structure).

[...]

You solution is great, I've yet to fully understand the pros/cons of
adding functions to prototypes, building objects or keeping them as
plain functions so tend to stick to the latter.

 

[VK]

Hi, I'm using the following code to retrieve data from an xml file and
populate a javascript array. The data is then displayed in html table
form. I would like to then be able to sort by each column. Once the
array elements are split, what is the best way to sort them? Thank you.

//populate data object with data from xml file.
//Data is a comma delimited list of values
var jsData = new Array();
jsData[0] = {lib: "#field SUBLOOKUP_LIB#",doc: "#field SUBLOOKUP_DOC#",
com: "#field SUBLOOKUP_COM"};

//split up values for each element
var o = jsData[0];
o.lib = o.lib.split(",");
o.doc = o.doc.split(",");
o.com = o.com.split(",");

As you may notice your data table stays under 90 degrees angle against
the needed position (thus records are going vertically).

So the first thing you need to pivot your table

[0]
// retrieve data - your orginal code:
sadData =
{lib:"string1,string2,string3,string4",
doc:"01,02,03,04",
com:"blah1,blah2,blah3,blah4"};

var tmp = [];
tmp[0] = sadData.lib.split(',');
tmp[1] = sadData.doc.split(',');
tmp[2] = sadData.com.split(',');

[1]
// pivot table:
var arr = [];
for (i=0; i<tmp[0].length; i++) {
arr = [tmp[0],tmp[1],tmp[2]];
}

[2]
// JavaScript array is not really multidimensional -
// it's so called "jagged array" - a single dimension array
// having other arrays as its elements. Besides other
// interesting things it also means that you can apply
// sort() method right on the top dimension w/o
// ant additional transformations:

function sortByStringDown(a,b) {
var i = sortByStringDown.args;
if (b < a) {return -1;}
else if (b > a) {return 1;}
else {return 0;}
}

sortByStringDown.args = 0;
// This will sort recods by the first field in descending order:
arr.sort(sortByStringDown);

 

[Thomas 'PointedEars' Lahn]

RobG wrote:
[snipped because of "ACK "]
As I said in <news:[email protected]> and as you

For some reason I can't locate messages in Thunderbird using the message
ID. I'm sure it used to do it... there's a 'find message by id'
extension for the Mozilla news reader, maybe I'll change to that.

The Message-ID Finder extension is probably provided along with your
installer version of SeaMonkey. It is also available for Thunderbird
and works fine in my v1.0.7/Linux (although I seldom need it)

[...]

for (p in o)
// this implies no order of properties; if order is important,
// one has to set up an appropriate algorithm, perhaps one using
// ["property1", "property2", "property3"]
{
mediumData[p] = o[p].split(",");

if (maxLen < (len = mediumData[p].length))
{
maxLen = len;
}
}

An issue for the OP to address is what to do if there are a different
number of values in each comma-separated 'record' - should empty
elements be inserted? Is that allowed to occur?

`empty' is not precise. It turns out that if a value is omitted, how
it ends up in the transformed data depends on how it was omitted:

a) ",foo,bar" => ""; "foo"; "bar"
"foo,,bar" => "foo"; ""; "bar"
"foo,bar," => "foo"; "bar"; ""

b) "foo,bar" if other property strings have more than two values
=> "foo"; "bar"; undefined

"foo,bar" if other property strings have no more than two values
=> "foo"; "bar"

(read `"foo,bar"' as

[{property1: "foo,bar", property2: ..., ...}]

and `"foo"; "bar"' as

[{property1: "foo", property2: ..., ...},
{property1: "bar", property2: ..., ...},
...] )

That is why I introduced the `maxLen' variable. The maximum number of
comma-separated elements per property determines the number of "rows"
(i.e. the array length) in the transformed data.

It seems to me the original data structure is deficient, the relationship
between items is their position in the array rather than some explicit
link (though that would mean a bigger data structure).
ACK

[...]
You solution is great, I've yet to fully understand the pros/cons of
adding functions to prototypes, building objects or keeping them as
plain functions so tend to stick to the latter.

Thank you In case of any questions, do not hesitate to ask.


\V/ PointedEars

 

[Thomas 'PointedEars' Lahn]

So the first thing you need to pivot your table
[...]

Nice solution (a little bit inefficient, though).
However, the OP needed an Object object, not an array.


PointedEars

 

[VK]

So the first thing you need to pivot your table
[...]

Nice solution (a little bit inefficient, though).
However, the OP needed an Object object, not an array.

As I'm reading the OP he needed to sort *array* of records. As I stated
before by staying withing the array only (w/o array<>hashtable
transformations) we are saving precious millis for the whole process.
I know that it is only bacause of the broken implementation on every
each JavaScript enabled computer (because Object and Array are really
the same). But if the implentation is guaranteed to be broken of every
single platform - why do not exploit it?

;-))

 

[Randy Webb]

VK said the following on 11/18/2005 5:35 AM:

VK wrote:

So the first thing you need to pivot your table
[...]

Nice solution (a little bit inefficient, though).
However, the OP needed an Object object, not an array.

As I'm reading the OP he needed to sort *array* of records.

He may have thought he needed to sort arrays but sometimes a better
solution involves using some other mechanism than what is originally though.

As I stated before by staying withing the array only (w/o array<>hashtable
transformations) we are saving precious millis for the whole process.

I know that it is only bacause of the broken implementation on every
each JavaScript enabled computer (because Object and Array are really
the same).

Huh? Arrays and Objects are *not* the same thing. We keep telling you
that and you keep ignoring it.

But if the implentation is guaranteed to be broken of every
single platform - why do not exploit it?

Nothing is guaranteed on the Web. Especially not Browser Behavior.

 

[Thomas 'PointedEars' Lahn]

So the first thing you need to pivot your table
[...]

Nice solution (a little bit inefficient, though).
However, the OP needed an Object object, not an array.

As I'm reading the OP he needed to sort *array* of records. [...]

No, his array `jsData' has (perhaps misguidedly) only one element,
`jsData[0]'. The basic original data is that element, an (extended)
Object object where he first wanted to split each property's string
value into an array (I helped him with that in another thread, see
<URL:but in fact he wanted them to be arranged so that they can be sorted
easily by a named criterion.

He has clarified input and expected output format for the transformation
in <URL:long enough (ca. 31 standard hours) before your followup.

And finally, both RobG and me already found an appropriate solution
in <URL:et seqq. and
<URL:ca. 30 standard hours
and ca. 23 standard hours before your followup.

That is not at all to say your posting was irrelevant or in some other
way a Bad Thing, however it did not address the OPs expectations. Since
this is a newsgroup and not a support forum, that is fine with me. But
you should at least acknowledge it.

[misconceptions]

As always recommended, you should get informed _before_ you post.


HTH & HAND

PointedEars

 

[VK]

He may have thought he needed to sort arrays but sometimes a better
solution involves using some other mechanism than what is originally though.

Mmm... Sorting is possible only on objects supporting IComparable
interface. Such are *for example* Array or String.
Object object doesn't have IComparable interface so a sentence like
"you need objects to sort" is meaningless to my *humble* mind.

Huh? Arrays and Objects are *not* the same thing. We keep telling you
that and you keep ignoring it.

Do you care for one more attempt? Because this topic was discussed
here:
<http://groups.google.com/group/comp...978d9/188f8dd6f2af8fe7?hl=en#188f8dd6f2af8fe7>

and I got nothing but explanations how stupid am I and that the Object
or Array performance are the same. After that actually I had to conduct
my own research for the best performance. Results are posted here.

Actually skip on explanations - I'm too tired of this crap. Other code
is based on the proper understanding of Object and Array nature, my
code is based on a broken implementation exploit which is not
guaranteed to be presented everywhere.
OP is free to choose whatever he wants.

Nothing is guaranteed on the Web. Especially not Browser Behavior.

True. Let me re-phrase it: it is guaranteed on those 5 browsers I do
anyhow care of.