How to create nested arrays based on arrays of strings in javascript?

Question

I am trying to create nested arrays with array of strings. Each string object on the array is delimited by a '|' and that char its uses to create a nested array over an already existing array.

edit fix IE: current array

var arr = [
    { val : 'root|leaf|lead2|boo|foo|lee'},
    { val : 'root|leaf|lead3|boo|foo|lee'},
    { val : 'root|leaf2|boo'},
    { val : 'root|leaf2|foo'},
    { val : 'root|leaf2|leaf3|more'},
    { val : 'root|leaf2|leaf3|things'},
    { val : 'root|leaf2|leaf3|here'},
    { val : 'sibling|leaf|leaf2|boo'},
    { val : 'sibling|leaf|leaf2|foo'},
    { val : 'sibling|leaf|leaf2|lee'},
    { val : 'sibling|boo'},
    { val : 'sibling|foo'},
    { val : 'sibling|boo|leaf3'},
    { val : 'sibling|boo|leaf3|more'},
    { val : 'sibling|boo|leaf3|things'},
    { val : 'sibling|boo|leaf3|here'},
    { val : 'sibling|ops'},
];

var nested = [
    root = [
        leaf = [
            leaf2 = [
                'boo', 'foo', 'lee'
            ],
            leaf3 = [
                'boo', 'foo', 'lee'
            ]
        ], 
        leaf2 = [
            'boo', 'foo', leaf3 = [
                'more', 'things', 'here'
            ]
        ]
    ],
    sibling = [
        leaf = [
            leaf = [
                leaf2 = [
                    'boo', 'foo', 'lee'
                ]
            ]
        ],
        'ops',
        'boo', 'foo', leaf3 = [
            'more', 'things', 'here'
        ]
    ]
];

Did you have a look at lodash lib it does exactly what you need — hpfs
– hpfs, Commented Aug 20, 2016 at 23:44
Your example result array doesn't contain valid JavaScript. Can you fix this please, so we know how to help you, otherwise we'd only be helping you create a JavaScript error and nothing meaningful — Andy-Delosdos
– Andy-Delosdos, Commented Aug 21, 2016 at 1:03

Paul Boutes · Accepted Answer · 2016-08-21 02:33:10Z

1

You can find here a functional approach, by using .map() and .reduce() methods. The idea is to parse the path by splitting over the | character, and then build the object on the fly.

const arr = [
  {cat : 'one|two|thre|boo'},
  {cat : 'one|two|boo|boo|ouch'},
  {cat : 'one|two|thre|boo|lee'},
  {cat : 'one|hey|something|other'},
  {cat : 'one|hey|keys|other'},
  {cat : 'this|blaj|something|other'},
];


function create(array) {
  const parse = elm => elm.cat.split('|');

  const build = (keys, obj, acc) => {
    keys.reduce((a, b) => {
        if (!a[b]) a[b] = {};
        return a[b];
      }, obj);
    Object.assign(acc, obj);
    return acc;
  };

  const obj = {};

  return array
    .map(a => parse(a))
    .reduce((acc, keys) => build(keys, obj, {}), {});
}

console.log(create(arr))

You can find the Working plunkr

answered Aug 21, 2016 at 2:33

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

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

2 Comments

9879800 Over a year ago

can you make it compatible with ECMAScript 5.1 ?

Paul Boutes Over a year ago

You just have to replace arrow function by normal function, and replace keyword "const" by "var"

Collectives™ on Stack Overflow

How to create nested arrays based on arrays of strings in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related