Functional way to build array of arrays in JavaScript

Question

I have a string which is the path to a value in a nested JavaScript object e.g.:

users.userA.credentials.name

I would like to split this string into its elements and then create an array with all "sub-paths", like so:

["users", "users.userA", "users.userA.credentials"]

Currently I'm solving this the following way:

const path = "users.userA.credentials.name"
const currentPath = []
const paths = []

for (const item of path.split('.')) {
  currentPath.push(item)
  paths.push([...currentPath])
}

It works fine, but I was wondering, if there is a more functional way (using map(), filter(), reduce() or maybe some lodash/ramda functions to achieve the same result.

Do you want users.userA.credentials.name as the fourth item too? — CertainPerformance
– CertainPerformance, Commented Dec 18, 2018 at 7:37
'users.userA.credentials.name'.split('.').map((item,index,all)=>all.slice(0,index+1).join('.')) — HMR
– HMR, Commented Dec 18, 2018 at 7:43
const paths = inits("users.userA.credentials.name".split("."));. How you implement inits (with a loop, map, reduce, whatever) doesn't really matter then. — Bergi
– Bergi, Commented Dec 18, 2018 at 7:54

Ori Drori · Accepted Answer · 2018-12-18 07:43:18Z

3

You can use Array.split() and Array.map() to do it in a more functional way:

const path = "users.userA.credentials.name"
const paths = path.split('.')
  .map((_, i, arr) => arr.slice(0, i + 1).join('.'));

console.log(paths);

answered Dec 18, 2018 at 7:43

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-12-18 07:42:35Z

0

You can use reduce to iterate over the substrings and push to an accumulator array, and check the accumulator's previous value (if any) and concatenate it with the new substring:

const path = "users.userA.credentials.name";
const splitPaths = path.split('.');
const initialValue = splitPaths.shift();
const paths = splitPaths.reduce((a, item, i) => {
  a.push(`${a[i]}.${item}`);
  return a;
}, [initialValue]);
console.log(paths);

answered Dec 18, 2018 at 7:42

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

Hassan Imam · Accepted Answer · 2018-12-18 07:47:12Z

0

You can use array#reduce. Split your path on . and then push the subarray after joining on . in an accumulator array.

const path = "users.userA.credentials.name",
      result = path.split('.').reduce((r, p, i, a) => {
        if(i)
          r.push(a.slice(0,i).join('.'));
        return r;
      }, []);
console.log(result);

answered Dec 18, 2018 at 7:47

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

Code Maniac · Accepted Answer · 2018-12-18 08:01:12Z

0

You can do it like this

Split the string with . and than by mapping through it we are joining the elements of temp array according to index.

let str = "users.userA.credentials.name";
let temp = str.split('.');
let op = temp.map((e,i)=> temp.slice(0,i+1).join('.'));
console.log(op);

In case you're interested to do it with regex you can do it like this

let str = "users.userA.credentials.name";
let temp = [];

let op = str.replace(/\.|$/g,(_,offset)=>{
  temp.push(str.substr(0,offset));
  return _;
})
console.log(temp);

edited Dec 18, 2018 at 8:01

answered Dec 18, 2018 at 7:45

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

Functional way to build array of arrays in JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related