Sorting an Array from an HTML element using array.sort

Question

I'm trying to create a word and number sorting program for a class final, but I can't get array.sort to work with an HTML element.

<textarea name="data" placeholder="Input data here:" class="inputBox" id="dataInput"></textarea>

// sorting words
//moving HTML input into array
function addDataWords() {
//clear dataOutput
  let dataWords = [];
  document.getElementById('dataOutput').innerHTML = '';
//push into array
  dataWords.push(document.getElementById('dataInput').value.split(','));
  console.log(dataWords);
//sort words
  dataWords.sort();
  console.log(dataWords);
  document.getElementById('dataOutput').innerHTML = dataWords;
}

Debugger shows that HTML elements are being moved into the array, but .sort doesn't seem to sort them.

charlietfl · Accepted Answer · 2021-04-26 00:43:40Z

2

The problem is split() returns an array. You are then pushing that array into the empty dataWords array as a sub array. So it would look like:

[['word1','word2'...]]

But you want ['word1','word2'...]

Just do :

let dataWords = document.getElementById('dataInput').value.split(',');

function addDataWords() { 
 
  // split comma delimited values into an array
  let dataWords =document.getElementById('dataInput').value.split(',');
  
  //sort words
  dataWords.sort();
  console.log(dataWords);
  document.getElementById('dataOutput').innerHTML = dataWords.join(', ');
}

addDataWords()

<textarea name="data" id="dataInput">foo,bar,two,one</textarea>

<div id="dataOutput"></div>

edited Apr 26, 2021 at 0:43

answered Apr 26, 2021 at 0:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Masood · Accepted Answer · 2021-04-26 00:34:27Z

0

JavaScript function .split() returns a new array.
So the output of your function is something like:

[['B', 'C', 'B']] // Example

So in this situation the easy solution is that you should sort the nested array

dataWords[0].sort();

Or a better way will be:

function addDataWords() {
  const dataWords = [];
  document.getElementById('dataOutput').innerHTML = '';

  const dataInput = document.getElementById('dataInput').value.split(','));
  for (let data of dataInput) {
     dataWords.push(data);
  }

  console.log(dataWords);
  document.getElementById('dataOutput').innerHTML = dataWords;
}

edited Apr 26, 2021 at 0:34

answered Apr 26, 2021 at 0:14

Masood

1,6041 gold badge23 silver badges33 bronze badges

8 Comments

charlietfl Over a year ago

"returns a new array" .. again, no it doesn't

Masood Over a year ago

It does! if not then what is the array inside dataWords[] array?

Masood Over a year ago

Not the sort(), but the split()

Masood Over a year ago

That is not the correct way to compare arrays in Javascript

charlietfl Over a year ago

I was comparing the objects. If the original statement was accurate they would not have been same object reference.

|

Collectives™ on Stack Overflow

Sorting an Array from an HTML element using array.sort

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related