Question

I have a variable length array of strings declared in javascript that contains Dungeons and Dragons class names. An example of this is below:

var class_names = new Array("Wizard", "Wizard", "Wizard", "Sorcerer", 
    "Sorcerer", "Ultimate Magus");

In my HTML, I use the javascript window.onload function to set a variety of variables from the javascript file to build the content of the page being displayed locally.

For things like name, this is easy:

document.getElementById('charname').innerHTML = name[0];

But for the class info, I don’t want to just pump out a massive string of class names, I want it condensed down. Using the example ‘class_names’ above, I want to end up with a string that looks like this:

“Wizard 3, Sorcerer 2, Ultimate Magus 1”

i.e. the number after each class name should be the number of repetitions found in the array.

Anyone have an idea how to make this happen on the fly, so when I alter the javascript file to add more class data to class_names, it is displayed appropriately on my HTML page?

Thanks in advance for any help I get on this pet project (namely creating a HTML page for each character in my campaign that can be printed out as a character sheet….it’s far better than manually writing a page for each character, or handwriting it on vanilla sheets).

Answer 1

It’s easy enough, just loop through the array and count repetitions.

var l = class_names.length, i, tmp = {}, ret = [];
for( i=0; i<l; i++) {
    if( !tmp[class_names[i]]) tmp[class_names[i]] = 0;
    tmp[class_names[i]]++;
}
for( i in tmp) {
    if( tmp.hasOwnProperty(i)) {
        ret.push(i+" "+tmp[i]);
    }
}
// output is ret.join(", ");