Outline numbering for an object tree

Last week I had talked about a layout dilemma that my buddy Justin
was having. This reminded me of an issue that programming challenge he hit me
with a few months prior. The challenge was to take an object tree and generate
the proper outline numbering for it. The object tree was hierarchical with an
indefinite number of children and nesting levels. The object tree looks
something like this:

var data = [{
  title: "Lorem",
    children: [{
      title: "Ipsum"
  }, {
    title: "Dolor",
    children: [{
      title: "Sit"
    }, {
      title: "Amet"
    }]
  }]
}, {
  title: "Consectetur",
  children: [{
    title: "Adipiscing"
  }, {
    title: "Elit"
  }]

That’s a Javascript object because FUCK YEAH JAVASCRIPT! Also because Justin
was working with Javascript and it seemed fair to work the problem out as such.
Now that we have our object, let’s take a look at what the desired output is.
If you’re not familiar with an outline, each section is numbered like 1.0 or
1.2.3 depending on how many levels deep it is. With the aforementioned object
we would be expecting an output like:

1.0 Lorem
1.1 Ipsum
1.2 Dolor
1.2.1 Sit
1.2.2 Amet
2.0 Consectetur
2.1 Adipiscing
2.2 Elit

The challenge didn’t get into indenting based on nesting, but that’s definitely
something that could improved. The code itself relies on on recursion since the
object can have any number of children which could have any number of children,

outlineNumber = function(items, lastId) {
  var currentId = lastId

  items.forEach(function(item) {
    currentId[currentId.length - 1]++

    console.log(currentId.length == 1 ? currentId + '.0' : currentId.join('.'), item.title

    if (item.children && item.children.length) {
      var childId = lastId.slice(0
      childId.push(0
      outlineNumber(item.children, childId
    }
  


outlineNumber(data, [0

The gist is that I start with an array with a single element of zero. For each
pass through the function, the last number in the array is incremented. For
each increase in nesting, another number is added to the end. Then the array of
numbers is combined together (with periods in between) to create the outline
number. There’s also some magic to toss in “.0” to the top level numbers.

Got a better way to attack this one? Comment below!

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.


If you found this article helpful, please consider buying me a coffee.