Display table populated by array and ordered by another array

Question

I found a similar post JavaScript - Sort an array based on another array of integers and just need some help implementing that script with my own script.

I'm working on a fiddle http://jsfiddle.net/c87Jx/ which displays a table based on the array array's data.



My script:

   //<![CDATA[ 
   //employee array
   window.onload = function () {

       var array = [];
       array[0] = {
           name: "John Doe",
           number: "508-555-1234"
       };
       array[1] = {
           name: "Jane Doe",
           number: "775-555-5678"
       };
       array[2] = {
           name: "Adam Doe",
           number: "603-555-9012"
       };
       array[3] = {
           name: "Karen Doe",
           number: "978-555-3456"
       };
       array[4] = {
           name: "Trish Doe",
           number: "603-555-7890"
       };
       array[5] = {
           name: "Company",
           number: "(try to reach someone)"
       };
       var arrayLength = array.length;
       var theTable = document.createElement("table");
       currentIndex = 0;
       lastIndex = array.length - 1;

       //write table header
       while (true) {
           tr = document.createElement("tr");

           td0 = document.createElement("td");
           td0.colSpan = 3;
           p = document.createElement("p");
           p.appendChild(document.createTextNode("Table"));
           td0.appendChild(p);
           tr.appendChild(td0);

           theTable.appendChild(tr);
           break;
       }

       //for each employee in above array, write the attempt #, their name, and their contact info
       for (var i = 0, tr, td; i < arrayLength; i++) {

           tr = document.createElement("tr");

           td1 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode("Attempt #" + (array.length++-5)));
           td1.appendChild(p);
           tr.appendChild(td1);

           td2 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode(array[i].name));
           td2.appendChild(p);
           tr.appendChild(td2);

           td3 = document.createElement("td");
           p = document.createElement("p");
           p.appendChild(document.createTextNode(array[i].number));
           td3.appendChild(p);
           tr.appendChild(td3);

           theTable.appendChild(tr);
       }
       document.getElementById("table").appendChild(theTable);
   };
   //]]>

Outputs a pretty basic table like:

<div id="table">
    <table>
        <tr>
            <td colspan="3"><p>Table</p></td>
        </tr>
        <tr>
            <td><p>Attempt #1</p></td>
            <td><p>John Doe</p></td>
            <td><p>508-555-1234</p></td>
        </tr>
        <tr>
            <td><p>Attempt #2</p></td>
            <td><p>Jane Doe</p></td>
            <td><p>775-555-5678</p></td>
        </tr>
        <tr>
            <td><p>Attempt #3</p></td>
            <td><p>Adam Doe</p></td>
            <td><p>603-555-9012</p></td>
        </tr>
        <tr>
            <td><p>Attempt #4</p></td>
            <td><p>Karen Doe</p></td>
            <td><p>978-555-3456</p></td>
        </tr>
        <tr>
            <td><p>Attempt #5</p></td>
            <td><p>Trish Doe</p></td>
            <td><p>603-555-7890</p></td>
        </tr>
        <tr>
            <td><p>Attempt #6</p></td>
            <td><p>Company</p></td>
            <td><p>(try to reach someone)</p></td>
        </tr>
    </table>
</div>

Next I want to introduce a second array, which will be used to manage the order in which the data from the first array displays in the outputted table. The goal here is to be able to manipulate the Attempt #s without having to modify the first array.

Example: The first array is written as:

1 - John

2 - Jane

3 - Adam

4 - Karen

5 - Trish

6 - Company

So I want the second array to control the first array's order, so if in the second array I wrote:

 var sortArr = [0,3,4,2,5,1];

It would make the first array output like this:

1 - John

2 - Karen

3 - Trish

4 - Adam

5 - Company

6 - Jane

As mentioned above, I found a similar post JavaScript - Sort an array based on another array of integers, and it seems to do exactly what I need. So my question is how do I integrate Nick's script with my current script?

Answer 1

Here's what I did:

First, I added the function created in the question you cited into your code:

window.onload = function () {

    function getSorted(arr, sortArr) {
        var result = [];
        // changed arr.length to sortArr.length:
        for(var i=0; i < sortArr.length; i++) {
            result[i] = arr[sortArr[i]];
        }
        return result;
    }

    //... the rest of your code
}

Next, I added two arrays:

var array = [],
    sortArr = [0,3,4,7,9,1],
    sortedArr;

Next, after you put all the data into the array variable, I called the getSorted function:

// your code putting data into array
//...
sortedArr = getSorted(array, sortArr);

Finally, I changed how you output data into your tables in the for loop as such:

// changed arrayLength to sortArr.length:
for (var i = 0, tr, td; i < sortArr.length; i++) {

    tr = document.createElement("tr");

    td1 = document.createElement("td");
    p = document.createElement("p");
    // changed (array.length++-5) to (i+1):
    p.appendChild(document.createTextNode("Attempt #" +(i+1)));
    td1.appendChild(p);
    tr.appendChild(td1);

    td2 = document.createElement("td");
    p = document.createElement("p");
    // changed (array[i].name) to (sortedArr[i].name):
    p.appendChild(document.createTextNode(sortedArr[i].name));
    td2.appendChild(p);
    tr.appendChild(td2);

    td3 = document.createElement("td");
    p = document.createElement("p");
    // changed (array[i].number) to (sortedArr[i].number):
    p.appendChild(document.createTextNode(sortedArr[i].number));
    td3.appendChild(p);
    tr.appendChild(td3);

    theTable.appendChild(tr);
}

Here is an updated fiddle that hopefully helps! Let me know if you have any questions!

Edit: I changed the number of iterations each for loop runs - both were based off array.length, now they are both based off of sortArr.length. This will only work when the length of sortArray is less than or equal to the length of array. It sounds like this will work for your situation - correct me if i'm wrong! :) Also, in the fiddle I added more data to array to test the new change.