Learn how to convert a list into an array in JavaScript

🚨 Real-world use-case: I wanted to convert an excel list into an array; it had 200+ records, so a pain to do manually.

So why not create something easy in JavaScript!

The end goal is to have a textarea where we can input our list and auto-convert it into an array.

This is going to be the result in Codepen:

https://codepen.io/rebelchris/pen/bGpqqRm

HTML Structure

The HTML is going to be super easy for this, we just need a textarea and a paragraph to output our array.

<div class="container">
  <textarea id="textarea">
Paste
your 
list 
here</textarea
  >
  <p id="array">["Paste","your ","list ","here"]</p>
</div>

CSS Styling

Let's also add some super easy CSS to make it look good:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  background: #3a86ff;
}
textarea {
  padding: 10px;
  min-width: 200px;
  width: 50vw;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 10px;
}
#array {
  background: #efefef;
  border: 1px dashed #333;
  padding: 10px;
  width: 50vw;
  min-width: 200px;
  word-wrap: break-word;
  margin-bottom: 10px;
  color: #ff006e;
  border-radius: 10px;
}

JavaScript convert a list into an array

Ok, on to the magic part, let's convert our array input into an array.

We start by adding defining our variables

const textarea = document.getElementById('textarea');
const array = document.getElementById('array');

Now we can add our input listener to the textarea element

textarea.addEventListener('input', function() {
  var arrayValues = textarea.value.split(/\n/g);
  array.innerHTML = JSON.stringify(arrayValues);
});

And then for some magic we will add a click event to our paragraph which will auto select all text.

array.addEventListener('click', function() {
  var range = document.createRange();
  var selection = window.getSelection();
  range.selectNodeContents(array);
  selection.removeAllRanges();
  selection.addRange(range);
});

An awesome, simple tool, but effective!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Learn how to convert a list into an array in JavaScript

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

HTML Structure

CSS Styling

JavaScript convert a list into an array

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

HTML Structure

CSS Styling

JavaScript convert a list into an array

Thank you for reading, and let's connect!