How to generate a tree from a string in JavaScript

Question

Looking for help, to generate a nested object tree from a string.

Example 1

A > B > C

Should result in object:

{
 name: A,
 children: [{
  name: B,
  children: [{
   name: C
  }],
 }]
}

Example 2

A > B > C | A > D > E

Result in object:

{
 name: A,
 children: [{
  name: B,
  children: [{
   name: C
  },{
   name: D,
   children: [{
    name: E
   }],
  }],
 }]
}

What I have so far:

Problem is, I am not sure how to properly solve the nesting.

let categoryTree = {
  categories: [{}]
}

const split = (string, seperator = '|', splitter = ' > ') => {
  if (!string.includes(seperator)) {
    let results = string.split(splitter)

    for (let i = 0; i < results.length; i++) {
      let lastNode = 0
      if (i != 0) {
        lastNode = i - 1
      }
      makeTree(results[i], results[lastNode], i)
    }

  }
  console.log(categoryTree)
  return categoryTree
}

const makeTree = (item, parent, i) => {
  if (categoryTree.categories[parent].name === item && categoryTree.categories[parent].name) {
    console.log('IN')
    categoryTree.categories[parent].categories.push({
      name: item,
      categories: [{}]
    })
  } else {
    categoryTree.categories.push({name: item, categories: []})
  }
}

We need to see your code so far so that we can help you solve your problem — Adam M.
– Adam M., Commented Feb 23, 2017 at 16:44
@NenadVracar A would have 1 children B. And B would have 2 children, C and E — Jakub Juszczak
– Jakub Juszczak, Commented Feb 23, 2017 at 16:55

Nina Scholz · Accepted Answer · 2017-02-23 17:59:17Z

3

You could use an iterative and recursive approach with an object as reference to the items.

var result = [],
    string = 'A > B > C | A > D > E';

string.split(' | ').forEach(function (a) {
    var keys = a.split(' > '),
        last = keys.pop();
    
    keys.reduce(function (r, k) {
        if (!r[k]) {
            r[k] = { _: [] };
            r._.push({ name: k, children: r[k]._ });
        }
        return r[k];
    }, this)._.push({ name: last });
}, { _: result });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Feb 23, 2017 at 17:59

answered Feb 23, 2017 at 16:53

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to generate a tree from a string in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related