How to generate an HTML ul/li list based on the contents of a JavaScript array, or how to create a JavaScript list.
How to make a list in JavaScript (JS)
Learn how to create a dynamic HTML list based on the contents of a JavaScript array. This tutorial shows you how to generate an unordered HTML list (ul) with list items (li) using vanilla JavaScript or React, making it easy to display data from an array in a clear and organized way. In this tutorial, you will find three solutions for vanilla JavaScript and three solutions for React, giving you a range of options to choose from, depending on your needs and preferences.
Table of Contents
By modifying the makeList() function to accept parameters and target elements, you can pass different arrays and generate different lists inside different containers.
Solution 1: JavaScript
This vanilla JavaScript function has zero dependencies and works in all browsers:
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
function makeList() {
// Establish the array which acts as a data source for the list
let listData = [
'Blue',
'Red',
'White',
'Green',
'Black',
'Orange'
];
// Make a container element for the list
let listContainer = document.createElement('div');
// Make the list
let listElement = document.createElement('ul');
// Make the list item
let listItem = document.createElement('li');
// Add it to the page
document.body.appendChild(listContainer);
listContainer.appendChild(listElement);
// Set up a loop that goes through the items in listItems one at a time
let numberOfListItems = listData.length;
for (let i = 0; i < numberOfListItems; ++i) {
// Add the item text
// Use this if the array elements contain HTML
// listItem.innerHTML = listData[i];
// If not, use the line below
// Use this if the array elements are text only
listItem.textContent = listData[i];
// Add listItem to the listElement
listElement.appendChild(listItem);
// Reset the list item
listItem = document.createElement('li');
}
}
// Usage
makeList();
See a JSFiddle demo here.
Solution 1: React
If you are using React, you could build the entire list in JavaScript and then insert it into the DOM in a single operation, which can be faster than adding elements one at a time. See the code below on how to use React to create the list:
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
import React from 'react';
import ReactDOM from 'react-dom';
function makeList() {
const listData = [
'Blue',
'Red',
'White',
'Green',
'Black',
'Orange'
];
const listItems = listData.map((item) => (
<li key={item}>{item}</li>
));
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
}
// Usage
makeList();Solution 2: JavaScript
This function is more compact and uses a forEach() loop:
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
let items = [
'Blue',
'Red',
'White',
'Green',
'Black',
'Orange'
];
// Make the list
let ul = document.createElement('ul');
// Make the list item
let li = document.createElement('li');
document.querySelector('#myItemList').appendChild(ul);
items.forEach((item) => {
// Add the item text
li.innerHTML += item;
// Add li to the ul
ul.appendChild(li);
// Reset the list item
li = document.createElement('li');
});Solution 2: React
If you are using React, you could build the entire list in JavaScript and then insert it into the DOM in a single operation, which can be faster than adding elements one at a time. See the code below on how to use React to create the list:
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
import React from 'react';
import ReactDOM from 'react-dom';
let items = [
'Blue',
'Red',
'White',
'Green',
'Black',
'Orange'
];
const listItems = items.map((item) => (
<li key={item}>{item}</li>
));
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('myItemList')
);
Here’s another way of doing it, similar to the first solution. Note that the forEach() loop is marginally slower. See it as the third solution below.
Solution 3: JavaScript
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
const options = [
set0 = [
'Option 1',
'Option 2'
],
set1 = [
'First Option',
'Second Option',
'Third Option'
]
];
function makeUL(array) {
// Create the list element
let list = document.createElement('ul');
// Create the list item
let item = document.createElement('li');
for (let i = 0; i < array.length; i++) {
// Set its contents
item.appendChild(document.createTextNode(array[i]));
// Add it to the list
list.appendChild(item);
// Reset the list item
item = document.createElement('li');
}
// Finally, return the constructed list
return list;
}
// Add the contents of options[0] to #foo:
document.querySelector('#foo').appendChild(makeUL(options[0]));
/**
* Usage
* Add an element to hold the data:
* <div id="foo"></div>
*/
makeUL(options.set0);
// or
makeUL(options.set1);This solution can be extended to pass an element parameter to the makeUL() function and display different arrays in different elements.
Solution 3: React
If you are using React, you could build the entire list in JavaScript and then insert it into the DOM in a single operation, which can be faster than adding elements one at a time. See the code below on how to use React to create the list.
This code defines a List component that takes an items prop and renders an unordered list with a list item for each item in the items array. The component is then rendered with the contents of options.set0 (or options.set1):
/**
* Generate HTML List From JavaScript Array
*
* @source https://getbutterfly.com/generate-html-list-from-javascript-array/
*/
import React from 'react';
import ReactDOM from 'react-dom';
const options = [
set0 = ['Option 1','Option 2'],
set1 = ['First Option','Second Option','Third Option']
];
const List = ({ items }) => {
return (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
};
ReactDOM.render(
<List items={options.set0} />,
document.getElementById('foo')
);
/**
* Usage
* Add an element to hold the data:
* <div id="foo"></div>
*/
ReactDOM.render(
<List items={options.set0} />,
document.getElementById('root')
);
// or
ReactDOM.render(
<List items={options.set1} />,
document.getElementById('root')
);
