Create grouped object out of array of Strings in JavaScript

Question

I have an issue I've not been able to solve, basically I want to transform this:

{
    "seamark:name": "Z-2",
    "seamark:type": "buoy_lateral",
    "seamark:light:range": "5",
    "seamark:light:colour": "red",
    "seamark:light:character": "Q",
    "seamark:radar_reflector": "yes",
    "seamark:buoy_lateral:shape": "can",
    "seamark:buoy_lateral:colour": "red",
    "seamark:buoy_lateral:system": "iala-a",
    "seamark:buoy_lateral:category": "port"
}

into this:

{
    seamark: {
        name: "Z-2",
        type: "buoy_lateral",
        light: {
            range: "5",
            colour: "red",
            reflector: "yes"
        },
        buoy_lateral: {
            shape: "can",
            colour: "red",
            system: "iala-a",
            category: "port
        }
    }
}

For now I've only achieved to get an array containing 10 objects with every time the path to the value (for example {seamark: {name: "Z-2"}}) using the code shown in the following link: codepen

Would anyone have an idea on how to group the properties deeply once I have the result shown in the codepen? Or maybe even another idea? thanks in advance

Daniel Krom · Accepted Answer · 2018-11-16 14:02:47Z

2

You are trying to unflat an object.

You can use flat npm (https://www.npmjs.com/package/flat)

const { unflatten } = require('flat');

const unflat = unflatten({
    "seamark:name": "Z-2",
    "seamark:type": "buoy_lateral",
    "seamark:light:range": "5",
    "seamark:light:colour": "red",
    "seamark:light:character": "Q",
    "seamark:radar_reflector": "yes",
    "seamark:buoy_lateral:shape": "can",
    "seamark:buoy_lateral:colour": "red",
    "seamark:buoy_lateral:system": "iala-a",
    "seamark:buoy_lateral:category": "port"
}, { delimiter: ":" }); // notice delimiter : default is "."

console.log(unflat);

Output:

{
    seamark: {
        name: 'Z-2',
        type: 'buoy_lateral',
        light: { range: '5', colour: 'red', character: 'Q' },
        radar_reflector: 'yes',
        buoy_lateral:
        {
            shape: 'can',
            colour: 'red',
            system: 'iala-a',
            category: 'port'
        }
    }
}

answered Nov 16, 2018 at 14:02

Daniel Krom

10.1k3 gold badges47 silver badges45 bronze badges

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

1 Comment

Arnaud Rochez Over a year ago

Well that's exactly what I needed ! Didn't know the library, thanks :)

Nina Scholz · Accepted Answer · 2018-11-17 10:34:23Z

2

For setting a value, you could split the path and reduce the path by walking the given object. If no object exist, create a new property with the name. Later assign the value.

function setValue(object, path, value) {
    var last = path.pop();

    path.reduce((o, k) => o[k] = o[k] || {}, object)[last] = value;
}

var data = { "seamark:name": "Z-2", "seamark:type": "buoy_lateral", "seamark:light:range": "5", "seamark:light:colour": "red", "seamark:light:character": "Q", "seamark:radar_reflector": "yes", "seamark:buoy_lateral:shape": "can", "seamark:buoy_lateral:colour": "red", "seamark:buoy_lateral:system": "iala-a", "seamark:buoy_lateral:category": "port" };

Object
    .keys(data)
    .forEach(k => {
        var keys = k.split(':');
        if (keys.length === 1) return;
        setValue(data, k.split(':'), data[k]);
        delete data[k];
    });

console.log(data);

edited Nov 17, 2018 at 10:34

answered Nov 16, 2018 at 14:04

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

Arnaud Rochez Over a year ago

Thanks for your answer, I like the fact it is concise, but I'm not a fan of changing the value of an object in another function than the one it was instantiated :/ I like the use of the library more since it is even more concise to just use a function, but thanks for your time !

Nitish Narang · Accepted Answer · 2018-11-16 20:27:12Z

1

You can also use "for..of" and "Array.reduce" like below

var obj = {
    "seamark:name": "Z-2",
    "seamark:type": "buoy_lateral",
    "seamark:light:range": "5",
    "seamark:light:colour": "red",
    "seamark:light:character": "Q",
    "seamark:radar_reflector": "yes",
    "seamark:buoy_lateral:shape": "can",
    "seamark:buoy_lateral:colour": "red",
    "seamark:buoy_lateral:system": "iala-a",
    "seamark:buoy_lateral:category": "port"
}


let newObj = {}
for(let [key, val] of Object.entries(obj)) {
  let keys = key.split(':')
  
  keys.reduce((o, d, i) => (
       i == keys.length - 1 
         ? (o[d] = val) 
         : (o[d] = o[d] || {})
       , o[d])
    , newObj)
}

console.log(newObj)

answered Nov 16, 2018 at 20:27

Nitish Narang

4,2042 gold badges18 silver badges22 bronze badges

Collectives™ on Stack Overflow

Create grouped object out of array of Strings in JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related