JSFiddle - React, Tailwind, and code Playground

HTML

<button id="sort-by-length">Sort by length</button>
<button id="sort-alphabetically">Sort alphabetically</button>

<div id="liste" style="margin-top:10px;">

</div>

JavaScript

var arr = [
	{
  	name: 'Nielsen',
    num: 1,
    count: 100
  },
  {
  	name: 'Jensenlongest',
    num: 15,
    count: 230
  },
  {
  	name: 'Jensenlong',
    num: 13,
    count: 500
  },
  {
  	name: 'Jensen',
    num: 2,
    count: 300
  },
  {
  	name: 'Hansen',
    num: 5,
    count: 400
  }
]

// Just adds the unsorted arr to the list for demo purpose
updateList(arr)

// On "Sort by length" button click
document.getElementById('sort-by-length').addEventListener('click', function (event) {
	arr.sort(sortNameByLength);
  updateList(arr);
})

// On "Sort alphabetically" button click
document.getElementById('sort-alphabetically').addEventListener('click', function (event) {
	arr.sort(sortNameAlphabetically);
  updateList(arr);
})

// Sort by name alphabetically
function sortNameAlphabetically(a, b) {
	return a.name > b.name
}

// Sort by name length
function sortNameByLength(a, b) {
	return a.name.length - b.name.length
}

// Updates the list according to the current sorting of the arr
function updateList(names) {
  var listHtml = ''
  
  names.forEach(function (item, index) {
    listHtml += item.name + ', ' + item.num + ' (' + item.count + ')<br>'
  })

  document.getElementById("liste").innerHTML = listHtml
}