DEV Community

Attila Gonda
Attila Gonda

Posted on

8 3

Indent (xml like) text with flatMap!

For a hobby-project I needed to indent an XML text which my code compiled and came up with a solution which is quite simple.

The input is an array with XML tags and all children nodes is nested inside other array.

A short example for that:

const input = [
    '<!DOCTYPE html>',
    '<html lang="en">',
    [
        '<head>',
        [
            '<title>Hello, World</title>',
        ],
        '</head>',
        '<body>',
        [
            '<h1>It works!</h1>',
        ],
        '</body>',
    ],
    '</html>',
];

And the output I wanted to achieve is this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello, World</title>
    </head>
    <body>
        <h1>It works!</h1>
    </body>
</html>

With the given input, the following code would achieve the goal:


function indentText (nodes) {
    return Array.isArray(nodes)
        ? nodes.flatMap(indentText).map(node => '\t' + node)
        : nodes;
}

const output = input
    .flatMap(indentText)
    .join('\n');

console.log(output);

Walk-through on the callback:

  • A callback passed to the Array.prototype.flatMap will walk through all the items and expected to return an item or an array for flattening.
  • If the passed value is not an array, it just returns it back - because we want to maintain the value.
  • If it's an array, it's a whole other story: Because flatMap only works on the first level, the method calls itself recursively through flatMap to resolve the deeper layers.
    • The recursive call makes sure there will be no arrays inside the actual one, just text (assuming the input is correct)
    • Mapping the items and adding an indent prefix to them. On the deepest level it will add a single character on each item, which will be accumulated during the recursive call going up the levels

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (3)

Collapse
 
chrisachard profile image
Chris Achard

Neat idea! I don't think I've ever used flatmap in this way - but will definitely think about it next time I have to recurse through something like this. Thanks :)

Collapse
 
pcdevil profile image
Attila Gonda

Thanks for the kind words! :)
This was a breakthrough for me: Previously I didn't understand how flatMap works, but when I thought about the problem it just *clicked* and I knew this will work flawlessly :))

Collapse
 
chrisachard profile image
Chris Achard

I love that feeling! It makes learning new things addicting :)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay