Pure Javascript array, get values using several html buttons that show array

Question

I am new to JavaScript and I am trying to create, using pure JavaScript and HTML, an array of hardcoded albums, each album has a title, category, artist, tracks[]. Now where I am stuck is trying to display my array onclick of a button and displayed differently dependent on which button is pushed. I have three buttons:

Get All Albums
Get All Albums By Artist
Get All By Category.

When I click on All I get all Albums by name in a bulleted list. By Artist I get all Albums only By Artist. Here is my code. I am working with external JavaScript files. Any help is greatly appreciated, But please no JQuery I want to do this in pure javascript.

Here is a jsbin of what i have so far

here

Welcome to StackOverflow, if you provide a link to jsFiddle and/or jsBin please try to also include the relevant code here. — Chad
– Chad, Commented Apr 19, 2013 at 18:42
The worst offender is to do a document.write after page load. Fill a container's innerHTML instead — mplungjan
– mplungjan, Commented Apr 19, 2013 at 18:45
@mplungjan or build everything in DOM methods such as createElement, etc. — Paul S.
– Paul S., Commented Apr 19, 2013 at 18:47
@Paul S. are there any good examples I can look at? I have gotten buttons to work on a very generic level w/o the tracks[] using inner js. — user2300240
– user2300240, Commented Apr 19, 2013 at 19:29

Xotic750 · Accepted Answer · 2013-04-19 19:38:13Z

Does this help

<button id="b1" type="button">Get All Albums</button>
<button id="b2" type="button">Get All Albums By Artist</button>
<button id="b3" type="button">Get All By Category</button>
<table border="1">
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Artist</th>
            <th>Tracks</th>
        </tr>
    </thead>
    <tbody id="albums"></tbody>
</table>

var b1 = document.getElementById("b1"),
    b2 = document.getElementById("b2"),
    b3 = document.getElementById("b3"),
    results = document.getElementById("albums"),
    albums = [];

function compareTitle(a, b) {
    if (a.title < b.title) {
        return -1;
    }

    if (a.title > b.title) {
        return 1;
    }

    return 0;
}

function compareArtist(a, b) {
    if (a.artist < b.artist) {
        return -1;
    }

    if (a.artist > b.artist) {
        return 1;
    }

    return 0;
}

function compareCategory(a, b) {
    if (a.category < b.category) {
        return -1;
    }

    if (a.category > b.category) {
        return 1;
    }

    return 0;
}

function addAlbum(title, category, artist, tracks) {
    var album = {
        "title": title,
            "category": category,
            "artist": artist,
            "tracks": tracks
    };

    albums.push(album);
}

addAlbum("d", "z", "s", [1, 2, 3]);
addAlbum("c", "y", "s", [1, 2, 3]);
addAlbum("b", "x", "t", [1, 2, 3]);
addAlbum("a", "x", "u", [1, 2, 3]);

function displayAll() {
    results.innerHTML = "";
    albums.sort(compareTitle);

    albums.forEach(function (album) {
        var tr = document.createElement("tr"),
            td1 = document.createElement("td"),
            td2 = document.createElement("td"),
            td3 = document.createElement("td"),
            td4 = document.createElement("td");

        td1.textContent = album.title;
        td2.textContent = album.category;
        td3.textContent = album.artist;
        td4.textContent = album.tracks.toString();

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        results.appendChild(tr);
    });
}

function displayArtist() {
    results.innerHTML = "";
    albums.sort(compareArtist);

    albums.forEach(function (album) {
        var tr = document.createElement("tr"),
            td1 = document.createElement("td"),
            td2 = document.createElement("td"),
            td3 = document.createElement("td"),
            td4 = document.createElement("td");

        td1.textContent = album.title;
        td2.textContent = album.category;
        td3.textContent = album.artist;
        td4.textContent = album.tracks.toString();

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        results.appendChild(tr);
    });
}

function displayCategory() {
    results.innerHTML = "";
    albums.sort(compareCategory);

    albums.forEach(function (album) {
        var tr = document.createElement("tr"),
            td1 = document.createElement("td"),
            td2 = document.createElement("td"),
            td3 = document.createElement("td"),
            td4 = document.createElement("td");

        td1.textContent = album.title;
        td2.textContent = album.category;
        td3.textContent = album.artist;
        td4.textContent = album.tracks.toString();

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        results.appendChild(tr);
    });
}

b1.addEventListener("click", displayAll, false);
b2.addEventListener("click", displayArtist, false);
b3.addEventListener("click", displayCategory, false);

On jsfiddle

YESSS!!! How awesome are you! Wow! Thank you so much for organizing in a way that i can understand too. I am sure there are shortcuts to it. But I really want to grasp what i am doing and this is EXACTLY what I have been trying to find. Thank You x infinity! Gotta love the foreach!
Oh yes, there is far more code than is necessary (repeated), but the main thing was to give you something to work with.
i cant thank you enough. With repetition comes perfection. I want to learn the long way first, then discover shortcuts on my own. You have definitely given me something I can work with and understand... I will say it again. You are sofa king awesome!!

Collectives™ on Stack Overflow

Pure Javascript array, get values using several html buttons that show array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related