How to sort a multi dimensional array output in ascending order?

Question

My code generates a two dimensional matrix when the OK is clicked. The code stores the data in the multidimensional array, but I am trying to add a sort function to the code which rearranges the code in ascending order using the 4th text box. Any suggestions on how I can do that ?

HTML Code

<div class="rightDiv">
<div id = "pastcalcblock"> 
    <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "display()"/>
         <div id = "resultTab">
                SORT<br>
                    <input type = "button" value = "As Entered" id = "enteredBut">
                    <input type = "button" value = "By Result" id = "resultBut" onClick = "sort()"><br><br>
                    <div id="expressions">
                    </div>                
            </div>
        </div>

Javascript Code

    function display()
    {
    var arrayOne =[document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value,document.getElementById('text4').value ];

      new_array=arrayOne.join(" ");
    var para = document.createElement("p");
    var t = document.createTextNode(new_array);
    para.appendChild(t)
    document.getElementById("expressions").appendChild(para);

    }



 function sort(){
            var dispArr = [document.getElementById('text1').value, 
document.getElementById('text2').value, document.getElementById('text3').value,document.getElementById('text4').value];
            var myArray = [];
             for(var i = 0 ; i < 1 ; i ++ ) {
                 myArray[i] = [];
                 for(var j = 0 ; j < 5 ; j++ )
                 {
                     myArray[i][j] = dispArr[j];
                     console.log(myArray[i][j]);
                  } 
             }


        }

What is the purpose of the signle row in `myArray`: although you have a loop, it contains only one row . You want that row to be sorted? — trincot, Apr 14 '17 at 22:17
Well, I was trying to store the array in another array and then run a for loop to compare the values. — , Apr 14 '17 at 22:18
I am very confused as to how to approach this problem. But I want to make it work. — , Apr 14 '17 at 22:19
Are the input values strings, or is the input expected to be numerical? — trincot, Apr 14 '17 at 22:19
I still don't understand what you want to sort: you only have 4 values, and you want to sort them by the 4th value -- that does not make much sense. What do you mean? — trincot, Apr 14 '17 at 22:23
The inputs are numerical. If you run the code, you can see a list of numbers that will be generated. My goal is the sort that list in ascending order, does that make sense ? — , Apr 14 '17 at 22:27
Did you post a similar question a few hours ago? This looks very familiar. — Barmar, Apr 14 '17 at 22:43
I am trying to add more functionality to the program. But it feels like a road block at the moment. Spent almost 3 hours trying to figure this out myself. — , Apr 14 '17 at 22:47

score 0 · Accepted Answer · answered Apr 14 '17 at 22:47

You would better keep the whole matrix in a memory variable, and add to that. Also consider that when the output is sorted, you must know how to get back to the original order also, so that the "As Entered" button still has the desired effect. So, it is better to have a display function that starts from scratch, empties the output and reproduces all the data in either entered or sorted order.

Here is how you could do that:

var matrix = []; // global value with all data

function addExpression() {
    var arrayOne = [
        document.getElementById('text1').value,
        document.getElementById('text2').value,
        document.getElementById('text3').value,
        document.getElementById('text4').value 
    ];
    // add to matrix
    matrix.push(arrayOne);
    display(false);
}

function display(byResult) {
    // Determine whether to sort or not:
    var matrix2 = byResult ? sorted(matrix) : matrix;
    // display each row:
    var expressions = document.getElementById("expressions");
    expressions.innerHTML = ''; // empty completely
    matrix2.forEach( row => {
        var para = document.createElement("p");
        var t = document.createTextNode(row.join(" "));
        para.appendChild(t)
        expressions.appendChild(para);
    });
}

function sorted(m){ // Create a copy, and sort that by last column
    return m.slice().sort( (a, b)  => a[3] - b[3] );
}

<div class="rightDiv">
    <div id = "pastcalcblock"> 
        <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "addExpression()"/>
         <div id = "resultTab">
            SORT<br>
            <input type = "button" value = "As Entered" id = "enteredBut" onClick="display(false)">
            <input type = "button" value = "By Result" id = "resultBut" onClick = "display(true)"><br><br>
            <div id="expressions">
            </div>         
        </div>
    </div>
</div>

Any idea how I could add a symbol after the first textbox on display ? — , Apr 15 '17 at 01:44
That really is a different question. But it has been asked before. Have a look at [this Q&A](http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) and [this Q&A](http://stackoverflow.com/questions/32950987/html-text-input-field-with-currency-symbol-in-the-end-of-it). If you still have an issue with implementing it, ask a new question. — trincot, Apr 15 '17 at 06:08

How to sort a multi dimensional array output in ascending order?

1 Answers1