I'm trying so hard to sort these arrays numerically and alphabetically, except that it only sorts them based on their length only (especially numbers). Please help...

Tips: Open in IDE and click on the arrow or on the top of the table to sort them, then click again if arrow is pointing down. Cheers...

Code:

var myArray = [{
    'worth': '100',
    'name': 'jessca',
    'reason': 'money',
    'email': '[email protected]',
    'number': '4456',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
  {
    'worth': '265',
    'name': 'e',
    'reason': 'money',
    'email': '[email protected]',
    'number': '3456',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
  {
    'worth': '6000',
    'name': 'ssica',
    'reason': 'sex',
    'email': '[email protected]',
    'number': '0456',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
  {
    'worth': '855',
    'name': 'sica',
    'reason': 'sex',
    'email': '[email protected]',
    'number': '9456',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
  {
    'worth': '8679',
    'name': 'ica',
    'reason': 'sex',
    'email': '[email protected]',
    'number': '0756',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
  {
    'worth': '1',
    'name': 'ca',
    'reason': 'money',
    'email': '[email protected]',
    'number': '14856',
    'instagram': 'hvg_ujh',
    'tiktok': 'hhgh.thg'
  },
]

$('th').on('click', function() {
  var column = $(this).data('column')
  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'
  } else {

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

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

buildTable(myArray)

function buildTable(data) {
  var table = document.getElementById('myTable')
  table.innerHTML = ''
  for (var i = 0; i < data.length; i  ) {
    var row = `<tr>
<td>${data[i].worth}</td>
<td>${data[i].name}</td>
<td>${data[i].reason}</td>
<td>${data[i].email}</td>
<td>${data[i].number}</td>
<td>${data[i].instagram}</td>
<td>${data[i].tiktok}</td>
                      </tr>`
    table.innerHTML  = row


  }
}

body {
  background: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
  <tr >
    <th data-column="Worth" data-order="desc">Worth &#9650</th>
    <th data-column="name" data-order="desc">Name &#9650</th>
    <th data-column="reason" data-order="desc">Reason &#9650</th>
    <th data-column="email" data-order="desc">Email &#9650</th>
    <th data-column="number" data-order="desc">Number &#9650</th>
    <th data-column="instagram" data-order="desc">Instagram &#9650</th>
    <th data-column="tiktok" data-order="desc">Tiktok &#9650</th>
  </tr>

  <tbody id="myTable"></tbody>
</table>

CodePudding user response：

Have you considered doing a nested sort. for example doing something like:

 myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1).sort((a,b)=>a[newcolumn] - b [newvolumn])

CodePudding user response：

It's quite unclear from your post, what the expected sorting logic is supposed to be. Simply saying "sort these arrays numerically and alphabetically" is not very specific.

What should be sorted numerically and what should be sorted alphabetically? Is there a sorting order? Are you looking to sort something alphabetically first and then something numerically second?

Regardless of the answer, I imagine you are facing the old JavaScript integers sorting issue:

How to sort an array of integers correctly

JavaScript, out of the box, will sort integers as Strings, not as integers.