/    Sign up×
Community /Pin to ProfileBookmark

JavaScript to Sort Categories

Copy linkTweet thisAlerts:
Aug 04.2009

?I am new to JavaScript and web development. I have five categories of content that needs to be sorted when the corresponding category link is clicked. I am looking for at least a skeleton program that I can use to get started. Can anyone offer any suggestions? Appreciate it…
~NewWebbie

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@astupidnameAug 04.2009 — It would be best if you would offer an example of what the "categories" and content look like, as well as any particular way in which they should be sorted. Otherwise, javascript does have a sort method for arrays. Such as:
[CODE]var arr = ["g", "d", "t", "a"];
alert("arr: "+ arr +"narr sorted: "+ arr.sort());[/CODE]
Copy linkTweet thisAlerts:
@JohnJRIAug 04.2009 — Hello, I'm a bit of a javascript newb also -- and by some coincidence I needed some help with a script to get me get started sorting. You can see by the notes that there are a lot of javascript newbie comments in the code. I don't remember all the details of this script, but the one alphanumsort function helps the sorting by taking care of numbers and such (if I remember right) and will put a list in 'dictionary order' if that makes sense (Javascript sort won't do this). I kept it handy because it seemed like a good script to hold on to. Hope it helps.

[CODE]
<html>
<head>
<title>Alphabetically Sort</title>

<script type="text/javascript">

var x = "Julie, Bob, Zach, John, paul, george, Ringo";
document.write(SortString(x));

function SortString(s){
strArr = s.split(', '); //String is seperated with spaces
strArr.sort(AlphaNumSort);
return(strArr.join(', '));
}

function SortTextArea(){
Bstr = document.getElementById('TArea1').value;
Bstr = Bstr.replace(/[r|n]/g,',');
// '|' means or. r, and n mean carriage return and new line respectively.
//The g stands for global, this means don;t just replace the first occurence.
strArr = Bstr.split(',');
strArr.sort(AlphaNumSort);
Astr = strArr.join('n');
document.getElementById('TArea2').value = Astr;
}

function AlphaNumSort(m,n) {
a = m.toLowerCase();
b = n.toLowerCase();
if (a == b) { return 0; } // values are equal
if (isNaN(m) || isNaN(n)) { // one or both are not numbers
return (a>b?1:-1);
} else {
return m-n; // both are numbers
}
}

</script>

</head>

<body>

<table border="1"><tr><td>
<textarea id="TArea1" rows="20">
red
Blue
White
yellow
orange
Maroon
pink
green
Rock
paper
scissors
Chris
John
Paul
george
Ringo</textarea>
</td><td>
<button onClick="SortTextArea()">Textarea Sort</button>
</td><td>
<textarea id="TArea2" rows="20"></textarea>
</td></tr></table>

</body>
</html>

[/CODE]
Copy linkTweet thisAlerts:
@NewWebbieauthorAug 04.2009 — It would be best if you would offer an example of what the "categories" and content look like, as well as any particular way in which they should be sorted. Otherwise, javascript does have a sort method for arrays. Such as:
[CODE]var arr = ["g", "d", "t", "a"];
alert("arr: "+ arr +"narr sorted: "+ arr.sort());[/CODE][/QUOTE]

astupidname: Thanks for the reply. This is a great skeleton. I guess what i'll do is create arrays for each category and when that category name link is selected the contents of the array will be displayed. I appreciate your help.

~NewWebbie
Copy linkTweet thisAlerts:
@NewWebbieauthorAug 04.2009 — Hello, I'm a bit of a javascript newb also -- and by some coincidence I needed some help with a script to get me get started sorting. You can see by the notes that there are a lot of javascript newbie comments in the code. I don't remember all the details of this script, but the one alphanumsort function helps the sorting by taking care of numbers and such (if I remember right) and will put a list in 'dictionary order' if that makes sense (Javascript sort won't do this). I kept it handy because it seemed like a good script to hold on to. Hope it helps.

[CODE]
<html>
<head>
<title>Alphabetically Sort</title>

<script type="text/javascript">

var x = "Julie, Bob, Zach, John, paul, george, Ringo";
document.write(SortString(x));

function SortString(s){
strArr = s.split(', '); //String is seperated with spaces
strArr.sort(AlphaNumSort);
return(strArr.join(', '));
}

function SortTextArea(){
Bstr = document.getElementById('TArea1').value;
Bstr = Bstr.replace(/[r|n]/g,',');
// '|' means or. r, and n mean carriage return and new line respectively.
//The g stands for global, this means don;t just replace the first occurence.
strArr = Bstr.split(',');
strArr.sort(AlphaNumSort);
Astr = strArr.join('n');
document.getElementById('TArea2').value = Astr;
}

function AlphaNumSort(m,n) {
a = m.toLowerCase();
b = n.toLowerCase();
if (a == b) { return 0; } // values are equal
if (isNaN(m) || isNaN(n)) { // one or both are not numbers
return (a>b?1:-1);
} else {
return m-n; // both are numbers
}
}

</script>

</head>

<body>

<table border="1"><tr><td>
<textarea id="TArea1" rows="20">
red
Blue
White
yellow
orange
Maroon
pink
green
Rock
paper
scissors
Chris
John
Paul
george
Ringo</textarea>
</td><td>
<button onClick="SortTextArea()">Textarea Sort</button>
</td><td>
<textarea id="TArea2" rows="20"></textarea>
</td></tr></table>

</body>
</html>

[/CODE][/QUOTE]
JohnJRI: I am so glad you kept this code...it provides the extra functionality that I'll need. I am so appreciative and can't wait until I can post something that will help another newbbie. Thanks...
Copy linkTweet thisAlerts:
@JohnJRIAug 04.2009 — Hi NewWebbie, I'm Glad it helped! That sounds like a plan. Acknowledgments to JMRKER for the alphNumSort function.
×

Success!

Help @NewWebbie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...