
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
JavaScript - How to create nested unordered list based on nesting of array?
Suppose, we have a nested array of arrays like this −
const arr = [ 'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6' ];
We are required to write a JavaScript program that should map any such nested array of arrays of literals to nested unordered lists of HTML.
The only thing to take care of here is that the nesting of the ul has to be just identical to the nesting of the array.
Example
The code for this will be −
JavaScript Code −
const arr = [ 'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6' ]; const prepareUL = (root, arr) => { let ul = document.createElement('ul'); let li; root.appendChild(ul); arr.forEach(function(item) { if (Array.isArray(item)) { prepareUL(li, item); return; }; li = document.createElement('li'); li.appendChild(document.createTextNode(item)); ul.appendChild(li); }); } const div = document.getElementById('myList'); prepareUL(div, arr);
HTML Code −
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="myList"></div> </body> </html>
Output
And the output will be −
- Related Articles
- How to sort an array of objects based on the length of a nested array in JavaScript
- Manipulate Object to group based on Array Object List in JavaScript
- Un-nesting array of object in JavaScript?
- How to create an unordered list without bullets in HTML?
- How to create an unordered list without bullets using CSS?
- How to create an unordered list with disc bullets in HTML?
- How to create an unordered list with circle bullets in HTML?
- How to create an unordered list with square bullets in HTML?
- How to create an unordered list with image bullets in HTML?
- How to create HTML list from JavaScript array?
- Sorting Array based on another array JavaScript
- How to access nested JSON property based on another property's value in JavaScript?
- How to create double nested array in MongoDB?
- Sort object array based on another array of keys - JavaScript
- Sort array based on another array in JavaScript

Advertisements