Grabbing all the “names” from a tree structure

Question

There are endless amount of tree questions on here, but for me, it would be nice if someone could help me with this specific question. I took a "mock interview" for my boot camp and this was a question. I did not have a good way to approach it..

const people = {
    name: "Robin",
    children: [
        {
            name: "Alberto",
            children: [
                {
                    name: "Quinn",
                    children: [
                        {
                            name: "Conner",
                            children: []
                        },
                        {
                            name: "Lila",
                            children: []
                        }
                    ]
                }
            ]
        },
        {
            name: "Charlie",
            children: []
        }
    ]
}

// Write a function called getNames that returns a string "Robin, Alberto, Quinn, Conner, Lila, Charlie

It can be a little overwhelming when you're trying to learn this stuff, especially when you're sifting through a multitude of questions that have different angles to solving them. So, help on this particular one would be greatly appreciated!

Answer 1

You could use reduce method to create recursive function that will return a string.

 const people = {"name":"Robin","children":[{"name":"Alberto","children":[{"name":"Quinn","children":[{"name":"Conner","children":[]},{"name":"Lila","children":[]}]}]},{"name":"Charlie","children":[]}]} function getNames(data, name = "") { return data.name + (data.children ? data.children.reduce((r, e) => { return r + ", " + getNames(e) }, "") : "") } console.log(getNames(people)) 

Answer 2

Easy, just use recursion.

 const people = { name: "Robin", children: [ { name: "Alberto", children: [ { name: "Quinn", children: [ { name: "Conner", children: [] }, { name: "Lila", children: [] } ] } ] }, { name: "Charlie", } ]}; function getNames(tree) { var names = []; for (var i = 0; i < tree.length; i++) { names.push(tree[i].name) if (tree[i].children) { names = names.concat(getNames(tree[i].children)) } } return names; } var names = getNames([people]); console.log(names); 

Answer 3

Recursive data structures can be easily transformed using the new flatMap

 const people = { name: "Robin", children: [ { name: "Alberto", children: [ { name: "Quinn", children: [ { name: "Conner", children: [] }, { name: "Lila", children: [] } ] } ] }, { name: "Charlie", } ]}; const getNames = ({ name, children = [] }) => [ name, ...children.flatMap(getNames) ] console.log(getNames(people)) // [ "Robin", "Alberto", "Quinn", "Conner", "Lila", "Charlie" ] 

If your environment doesn't define it, you can write your own flatMap

 const flatMap = (f, xs = [], context = null) => xs.reduce ( (acc, x, i) => acc.concat (f.call (context, x, i, xs)) , [] ) const people = { name: "Robin", children: [ { name: "Alberto", children: [ { name: "Quinn", children: [ { name: "Conner", children: [] }, { name: "Lila", children: [] } ] } ] }, { name: "Charlie", } ]}; const getNames = ({ name, children = [] }) => [ name, ...flatMap (getNames, children) ] console.log(getNames(people)) // [ "Robin", "Alberto", "Quinn", "Conner", "Lila", "Charlie" ] 

flatMap is supported in Node 11, but no longer included in babel-polyfill as of Babel 7, where it now has to be manually imported

// Node 10 or Babel 7
import 'core-js/fn/array/flat-map'

Of you can polyfill it manually

 // manual polyfill Array.prototype.flatMap = function (f, context = null) { return this.reduce ( (acc, x, i) => acc.concat (f.call (context, x, i, this)) , [] ) } const people = { name: "Robin", children: [ { name: "Alberto", children: [ { name: "Quinn", children: [ { name: "Conner", children: [] }, { name: "Lila", children: [] } ] } ] }, { name: "Charlie", } ]}; const getNames = ({ name, children = [] }) => [ name, ...children.flatMap(getNames) ] console.log(getNames(people)) // [ "Robin", "Alberto", "Quinn", "Conner", "Lila", "Charlie" ]