JavaScript sorting function not sorting correctly-CodePudding

I'm very new to javascript and coding in general so bear with me. I have an array of javascript objects with around 1000 total entries. Each array row holds information about meteors that have impacted Earth.

<table >
            <tr  >
                <th data-colname="date" data-order="desc"> Date/Time (UT) &#9650</th>
                <th data-colname="latitude">Latitude (deg) &#9650</th>
                <th data-colname="longitude" data-order="desc">Longitude (deg) &#9650</th>
                <th data-colname="altitude" data-order="desc">Altitude (km) &#9650</th>
                <th data-colname="velocity" data-order="desc">Velocity (km/s) &#9650</th>
                <th data-colname="vx" data-order="desc">vx &#9650</th>
                <th data-colname="vy" data-order="desc">vy &#9650</th>
                <th data-colname="vz" data-order="desc">vz &#9650</th>
                <th data-colname="radiatedEnergy" data-order="desc">Total Radiated Energy (J) &#9650</th>
                <th data-colname="impactEnergy" data-order="desc">Calculated Total Impact Energy (kt) &#9650</th>
            </tr>
    
            <tbody id="myTable"> </tbody>
        </table>


var myArray = [
            {'date': '2022-09-14 23:31:15' ,'latitude': '40.8N' ,'longitude': '63.4E'  ,'altitude': '35.8' ,'velocity': '17.4' ,'vx': '-13.9' ,'vy': '-4.3'  ,'vz': '9.5'   ,'radiatedEnergy': '15.2e10'   ,'impactEnergy': '0.11'},
            {'date': '2013-02-15 03:20:33' ,'latitude': '54.8N' ,'longitude': '61.1E'  ,'altitude': '23.3' ,'velocity': '18.6' ,'vx': ' 12.8' ,'vy': '-13.3' ,'vz': '-2.4'  ,'radiatedEnergy': '3.75e14'  ,'impactEnergy': '440'},
            {'date': '2018-12-18 23:48:20' ,'latitude': '56.9N' ,'longitude': '172.4E' ,'altitude': '26.0' ,'velocity': '13.6' ,'vx': '6.3'   ,'vy': '-3.0'  ,'vz': '-31.2' ,'radiatedEnergy': '3.13e13'  ,'impactEnergy': '49'},
         ]
buildTable(myArray)

The array is then sorted and built onto a webpage with html.

$('th').on('click', function(){         
        var column = $(this).data('colname')
        var order = $(this).data('order')
        var text = $(this).html()
        text = text.substring(0, text.length - 1);
     
        if(order == 'desc') {
            $(this).data('order', "asc")
            myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
            text  = '&#9660'     //appends triangle symbol based on ascending or descending            

        }else {
            $(this).data('order', "desc")
            myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
            text  = '&#9650'
        }

    $(this).html(text)
    buildTable(myArray)
    })

                
    function buildTable(data){
        var table = document.getElementById('myTable')
        table.innerHTML = ''   

        for (var i = 0; i < data.length; i  ){
            var colname = `num-${i}`
            var row = `<tr>
                <td>${data[i].date}</td>
                <td>${data[i].latitude}</td>
                <td>${data[i].longitude}</td>
                <td>${data[i].altitude}</td>
                <td>${data[i].velocity}</td>
                <td>${data[i].vx}</td>
                <td>${data[i].vy}</td>
                <td>${data[i].vz}</td>
                <td>${data[i].radiatedEnergy}</td>
                <td>${data[i].impactEnergy}</td>
            </tr>`
        table.innerHTML  = row
            }
        }

The problem is I need this sorting algorithm to work for 2 of the most important columns, which it currently isn't, being radiatedEnergy and impactEnergy. How can I modify this sorting algorithm to sort radiatedEnergy values so that 3.75e14 > 15.2e10?

Also I can't figure out why impactEnergy sorting seems to only check the first number instead of the entire value.

image of impactEnergy column

I've tried different sorting algorithms to include parameters that would fit this data but none of them are working. For radiatedEnergy I need the algorithm to differentiate between e10, e11, e12, etc. For impactEnergy I'm lost as to why it is not checking the entire value. Any help is appreciated.

CodePudding user response：

Since the number is enclosed in single quotes, it is treated as text and string comparison is used instead of number comparison.

Remove single quote from the numbers in your array declaration.
Use number.toExponential() method to display the number in exponential form.