Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to process JavaScript nested array and display the order of numbers according to the level upto which they are nested?

Javascript Web Development Front End Technology Object Oriented Programming

Processing nested arrays and displaying elements with proper indentation based on their nesting level is a common JavaScript task. This technique helps visualize the hierarchical structure of nested data.

Problem Statement

Given a nested array like this:

const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];

We need to display numbers with indentation showing their nesting level. Elements at deeper levels should have more indentation.

Expected Output

23
6
   2
      6
      2
      1
      2
   2
5
2

Solution Architecture

Level 0 Level 1 Level 2 23, 6, 5, 2 [2, 2] [6, 2, 1, 2] Recursive Processing with Indentation

Method 1: Using Recursive Function (Console Output)

const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];

function processNestedArray(array, level = 0) {
    array.forEach(item => {
        if (Array.isArray(item)) {
            processNestedArray(item, level + 1);
        } else {
            const indent = '   '.repeat(level);
            console.log(indent + item);
        }
    });
}

processNestedArray(arr);

23
6
   2
      6
      2
      1
      2
   2
5
2

Method 2: DOM Manipulation with Visual Indentation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Nested Array Display</title>
    <style>
        .output { font-family: monospace; line-height: 1.5; }
    </style>
</head>
<body>
    <div id="output" class="output"></div>
    
    <script>
        const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];
        const output = document.getElementById('output');
        
        function displayNestedArray(array, level = 0, container = output) {
            array.forEach(item => {
                if (Array.isArray(item)) {
                    displayNestedArray(item, level + 1, container);
                } else {
                    const div = document.createElement('div');
                    div.style.marginLeft = (level * 20) + 'px';
                    div.textContent = item;
                    container.appendChild(div);
                }
            });
        }
        
        displayNestedArray(arr);
    </script>
</body>
</html>

Method 3: Using Reduce for Complex Processing

const arr = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];

function processWithReduce(array, level = 0) {
    return array.reduce((result, item) => {
        if (Array.isArray(item)) {
            return result.concat(processWithReduce(item, level + 1));
        } else {
            const indent = '   '.repeat(level);
            return result.concat(indent + item);
        }
    }, []);
}

const result = processWithReduce(arr);
result.forEach(line => console.log(line));

23
6
   2
      6
      2
      1
      2
   2
5
2

Key Points

The recursive approach works by:

  • Level tracking: Each recursive call increments the nesting level
  • Type checking: Array.isArray() determines if an item needs further processing
  • Indentation: Level multiplied by spaces or pixels creates visual hierarchy
  • Base case: Non-array items are directly displayed with proper indentation

Comparison

Method Output Target Best For
Recursive forEach Console Simple display, debugging
DOM Manipulation Web Page Visual presentation with styling
Reduce Method Array/String Data transformation, further processing

Conclusion

Processing nested arrays with level-based indentation demonstrates recursive thinking and data visualization. The recursive approach elegantly handles arbitrary nesting depths while maintaining clean, readable code.

Updated on: 2026-03-15T23:19:00+05:30

329 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements