Transform an array to an object with nested properties according to the array

Question

I have several arrays as the following:

[ 'businessOpenAccount', 'accountSettings1.page.js' ]
[ 'businessOpenAccount', 'accountSettings2.page.js' ]
[ 'mainTest', 'test', 'test1.page.js' ]
[ 'mainTest', 'test', 'test2.page.js' ]

My expected result is to have an object in this way:

{
  businessOpenAccount: {
    'accountSettings1.page.js': {},
    'accountSettings2.page.js': {}
  },
  mainTest: {
    test: {
      'test1.page.js': {},
      'test2.page.js': {}
    }
  }
}

So actually I want to parse the arrays and build a nested object to return from them, but being sure to check that if a property already exists (because defined from a previous array) I won't override it, but just add the new nested property in it, respecting the correct order of nesting.

I tried few approaches using reduce, reduceRight and simple forEach/for loops but I still cannot really achieve the solution I would like.

Any tips please?

This is the best way I have so far, but I override the properties cycling over multiple arrays (the example with a single array):

const relevantFilePath = ['businessOpenAccount', 'accountSettings.page.js'];
let obj = {};
relevantFilePath.forEach((el, ind) => {
  if (ind === 0) {
    obj[el] = {};
    previousEl = obj[el];
  } else {
    previousEl[el] = {};
    previousEl = previousEl[el];
  }
});
console.log(obj);

Nina Scholz · Accepted Answer · 2017-09-23 12:20:35Z

2

You could iterate the given data and reduce the object and take the last item with splitted value.

var data = [['businessOpenAccount', 'accountSettings1.page.js'], ['businessOpenAccount', 'accountSettings2.page.js'], ['mainTest', 'test', 'test1.page.js'], ['mainTest', 'test', 'test2.page.js']],
    object = {};
    
data.forEach(function (a) {
    var last = a.pop().split('.')[0];
    
    a.reduce(function (o, k) {
        return o[k] = o[k] || {};
    }, object)[last] = '';
});

console.log(object);

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

ES6 with without mutating original data

var data = [['businessOpenAccount', 'accountSettings1.page.js'], ['businessOpenAccount', 'accountSettings2.page.js'], ['mainTest', 'test', 'test1.page.js'], ['mainTest', 'test', 'test2.page.js']],
    object = {};
    
data.forEach(function (a) {
     var temp = a.slice(),
         last = temp.pop().split('.')[0];
    
    temp.reduce((o, k) => o[k] = o[k] || {}, object)[last] = '';
});

console.log(object);

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

edited Sep 23, 2017 at 12:20

answered Sep 23, 2017 at 11:35

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

quirimmo Over a year ago

Am I rude if I kindly say that I really really love you? Thanks a million!

Francois · Accepted Answer · 2017-09-23 12:26:31Z

0

A recursive solution which would work for anykind of sub array with unlimited depth.

const a = [
    ['businessOpenAccount', 'accountSettings1.page.js'], 
    ['businessOpenAccount', 'accountSettings2.page.js'], 
    [ 'businessOpenAccount', 'test1', 
        [
            ['test2', 'test2.settings.page.js', 
                [
                     ['test2', 'test2.settings.page.js'],
                     ['test3', 'test3.settings.page.js'],
                ], 
                'test4',
            ],
            ['test3', 'test3.settings.page.js'],
        ]
    ],
    ['mainTest', 'test', 'test1.page.js'], 
    ['mainTest', 'test', 'test2.page.js'],
];

const result = {};

const traverse = (result, arr) => {
    let firstEl = arr.shift();
    if (firstEl instanceof Array) {
        if (arr.length >= 1) {
            traverseTop(result, firstEl);
            return traverse(result, arr);
        } 
        return traverseTop(result, firstEl);
    }
    firstEl = firstEl.split('.')[0];
    result[firstEl] = arr.length >= 1 ? (result[firstEl] || {}) : '';
    if (arr.length >= 1) {
        return traverse(result[firstEl], arr);
    }
    return;
};

const traverseTop = (result, arr) => {
    arr.forEach((subArr) => {
        const firstEl = subArr.shift().split('.')[0];
        result[firstEl] = result[firstEl] || {};
        traverse(result[firstEl], subArr)
    });
    return result;
};

console.log(traverseTop(result, a));

edited Sep 23, 2017 at 12:26

answered Sep 23, 2017 at 11:52

Francois

3,09016 silver badges21 bronze badges

3 Comments

quirimmo Over a year ago

Upvoted another your answer which was totally correct and the best answer for the question, in order to thank you for the effort, I really appreciate it and I am really thankfully for that, but Nina's solution in this case is more elegant and the purpose of SO is to provide the best solutions for other users that in future will have a similar issue so just upvoted that one in this case. But again, thanks a million

Francois Over a year ago

You're right, I find the other one more elegant also :)

Francois Over a year ago

I have updated my code to handle nested structures. I like recursion :D

Collectives™ on Stack Overflow

Transform an array to an object with nested properties according to the array

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related