Sorting by number doesn't work in my array Javascript

Question

I've made a code that's supposed to register a name and an integer value, but the sorting code I made doesn't work. I tried searching around here, but I couldn't understand the answers. I also tried figuring it out on myself, but it didn't work. The sorting function is the "datoSamanlikning" function towards the end of the code. If you don't understand the names of some of the variables, or it confuses you, it's in norwegian. Just ask whatever you need

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Oppdrag</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>   
            #knappar {
              margin-bottom: 10px;  
            }
            ul {
                list-style-type: none;
            }         
            #oppdragsTabell, td {
                background-color: white;
                border: solid 2px black;
                padding: 5px;
                border-collapse: collapse;
            }            
            #graf {
                float: left;
                display: flex;
                width: 300px;
                height: 400px; 
                flex-direction: row; 
                align-items: flex-end;
                margin: 10px
            }
            #graf>div { 
                background-color: blue; 
                color:white;
                margin: 5px;
                padding:5px;
                text-align:center;
                flex-grow:1;
                }
        </style>
    </head>
    <body>
        <div class="row justify-content-center">
            <h1>Registrer Oppdrag</h1>
        </div>
        <div class="container-fluid">
            <form id ="registrerOppdrag">
                <div class="row justify-content-center">
                    <div id="navn">
                        <label for ="namn" style="margin-right: 5px;">Namn: </label><input type = "text" id ="namn" required placeholder="Skriv inn her">
                        <label for = "hopp">Hopp lengde:</label> <input type="number" id = "hopp" required placeholder="Skriv inn desimaltal" step="any">
                    </div>
                </div>
                    
                                           
                <div id="knappar">
                    <div class="row justify-content-center">
                        <button type= "submit" style="margin-right: 5px;">Registrer</button>
                        <button type="reset" style="margin-right: 5px;">Tøm skjema</button>
                        <button id= "slettSiste">Slett siste oppdrag</button>
                    </div>
                    
                </div>
            </form>
        </div>
        
    <div class="row justify-content-center">
        <h2>Oppdragsliste</h2>
        <div id = "liste">            
        <ul id="oppdragsListe"></ul>   
        </div>
    </div>
    <div class="row justify-content-center">
        <h2>Oppdragstabell</h2>
        <div id ="tabell">
            <table id="oppdragsTabell"></table>           
        </div> 
    </div>
       
        <div class="row justify-content-center">
            <div id = "antallOppdr">
            </div>
        </div>
        
        
        <div id = "graf">
        </div>
    
        <script>
            // Diverse variablar
            var registrerOppdrag = document.getElementById("registrerOppdrag");
            var namn = document.getElementById("namn");
            var hopp = document.getElementById("hopp")
            var slettSiste = document.getElementById("slettSiste");
            var tabell = document.getElementById("tabell");
            var graf = document.getElementById("graf");
            var antallOppdr = document.getElementById("antallOppdr");
            var oppdrag =[]; // Opprette tom array
            var antallOppdrag;
                   
            // Registrerer dato,namn,velgProdukt,skildring og  legg verdiar til tinging array. 
            registrerOppdrag.onsubmit=function(evt) {
                evt.preventDefault(); //Vere på sida
                
                // Legge til oppdrag i oppdrag Array    
                oppdrag.push({Namn: namn.value, Hopp: hopp.value});
            
                // Kalle opp oversikt funksjon
                oversikt();
                
                // Nullstille inputbokser
                
                namn.value ="";
                hopp.value ="";
            }
            
             // Slette siste oppdrag
            slettSiste.onclick = function(evt) {
                oppdrag.pop();         
                // Oppdatere oversikt
                oversikt();
            }
            
            // sortere synkande  på dato 
            function datoSamanlikning(a,b){
                var datoA = new Number(a.hopp), datoB = new Number(b.hopp);
                return datoB - datoA;
                }     
             
             //Funksjon for å lage ei liste og grafisk oversikt over oppdrag
            function oversikt() {
               // Tømme liste og tabell  
                
                // Kalle opp funksjonane visTabell, visListe, talOppdrag og visGraf
                
                // sorter med å kalle opp datosorteringsfunksjon
                oppdrag.sort(datoSamanlikning);
                 
                visTabell();
                }
                    
            // Finn tal på oppdrag   
            function talOppdrag() {
                
                // Nullstille antall oppdrag html element
                antallOppdr.innerHTML = 0;
                
                antallOppdrag = oppdrag.length;
                antallOppdr.innerHTML="Tal på oppdrag:  " + antallOppdrag;
            }
            
             
             
                
            // Vise tabell over oppdrag
            function visTabell() {
                  oppdragsTabell.innerHTML = ""; 
            
                for(var el of oppdrag){
                    //Dersom verdier i oppdrag array vis tabell
                    if (oppdrag.length > 0) {  
                    oppdragsTabell.innerHTML += "<tr><td>" + el.Namn + "</td>" + "<td>" + el.Hopp + "</td> </tr>"; 
                     }
                    else{
                        oppdragsTabell.innerHTML = "unvisible";
                    }
                    }   
                }
           
                                         
                                  
                     
                    
                                 
                                         
         </script>
    </body>
</html>

**All: It's just a typo.** You're creating the objects with the property `Hopp` (capital first letter), but then you're using `hopp` (lower case) in the `sort` callback. — T.J. Crowder, Nov 11 '21 at 07:39
A couple of other things: 1. I'd suggest converting to number when creating the object, rather than later when sorting. Then your `sort` callback gets simpler: `return a.hopp - b.hopp;` (or `return a.Hopp - b.Hopp;` depending on which way you go on the property name.) 2. Don't use `new Number`, there's basically no reason to ever directly create the object versions of the primitive types. Instead, [here's a list](https://stackoverflow.com/questions/28994839/why-does-string-to-number-comparison-work-in-javascript/28994875#28994875) of ways to convert strings to numbers. — T.J. Crowder, Nov 11 '21 at 07:40

score -1 · Accepted Answer · answered Nov 11 '21 at 07:43

-1

Your mistake is the typo Hopp with hopp. Try to fix like below.

function datoSamanlikning(a,b){
  // typo this line
  var datoA = new Number(a.Hopp), datoB = new Number(b.Hopp);
  return datoB - datoA;
}

answered Nov 11 '21 at 07:43

Anh Nhat Tran

561
1
6
18

Sorting by number doesn't work in my array Javascript

1 Answers1