creating nested object from keys

Question

I need to create a object from a json structure. I am confused on how to do the recursive of the structure.

This is my sample json structure

{
        "dynamic.title": "Lorem Ipsum title",
        "dynamic.main_section.header.title": "Lorem Ipsum main section header title ",
        "dynamic.main_section.body.collection.first.title": "Lorem Ipsum main section  body collection first title",
        "dynamic.main_section.body.collection.first.description": "Lorem Ipsum main section  body collection first description",
        "dynamic.main_section.body.collection.first.id": "Lorem Ipsum main section  body collection first id",
        "dynamic.main_section.body.collection.first.child.first.title": "Lorem Ipsum main section  body collection first of first child title ",
        "dynamic.main_section.body.collection.first.child.first.id": "Lorem Ipsum main section  body collection first of first child id ",
        "dynamic.main_section.body.collection.first.child.first.url": "https://loremipsum/1",
        "dynamic.main_section.body.collection.first.child.first.names.first": "John Doe",
        "dynamic.main_section.body.collection.first.child.first.names.second": "Jane Doe",
        "dynamic.main_section.body.collection.second.title": "Lorem Ipsum main section  body collection second title",
        "dynamic.main_section.body.collection.second.description": "Lorem Ipsum main section  body collection second description",
        "dynamic.main_section.body.collection.second.id": "Lorem Ipsum main section  body collection second id",
        "dynamic.main_section.body.collection.second.child.first.title": "Lorem Ipsum main section  body collection second of first child title ",
        "dynamic.main_section.body.collection.second.child.first.id": "Lorem Ipsum main section  body collection second of first child id ",
        "dynamic.main_section.body.collection.second.child.first.url": "https://loremipsum/2",
        "dynamic.main_section.body.collection.second.child.second.title": "Lorem Ipsum main section  body collection second of second child title ",
        "dynamic.main_section.body.collection.second.child.second.id": "Lorem Ipsum main section  body collection second of second child id ",
        "dynamic.main_section.body.collection.second.child.second.url": "https://loremipsum/3"
    }

What i required format is something like this

{
        "dynamic": {
            "title": "Lorem Ipsum title",
            "main_section": {
                "header": {
                    "title": "Lorem Ipsum main section header title "
                },
                "body": {
                    "collection": [
                        {
                            "title": "Lorem Ipsum main section  body collection first title",
                            "description": "Lorem Ipsum main section  body collection first description",
                            "id": "Lorem Ipsum main section  body collection first id",
                            "child": [
                                {
                                    "title": "Lorem Ipsum main section  body collection first of first child title ",
                                    "id": "Lorem Ipsum main section  body collection first of first child id ",
                                    "url": "https://loremipsum/1",
                                    "names": ["John Doe", "Jane Doe"]
                                }
                            ]
                        },
                        {
                            "title": "Lorem Ipsum main section  body collection second title",
                            "description": "Lorem Ipsum main section  body collection second description",
                            "id": "Lorem Ipsum main section  body collection second id",
                            "child": [
                                {
                                    "title": "Lorem Ipsum main section  body collection second of first child title ",
                                    "id": "Lorem Ipsum main section  body collection second of first child id ",
                                    "url": "https://loremipsum/2"
                                },
                                {
                                    "title": "Lorem Ipsum main section  body collection second of second child title ",
                                    "id": "Lorem Ipsum main section  body collection second of second child id ",
                                    "url": "https://loremipsum/3"
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }

If the left side key consist of first second then it will be an array, but if more than one property exist then it will be an object or else it could be an array.

How could i achieve this in js?

This is how the JSON struct is not getting as numerals instead of getting as first second — dev
– dev, Commented Jun 8, 2021 at 18:07

Nina Scholz · Accepted Answer · 2021-06-08 18:19:29Z

2

You need to replace numerals to indices and check the keys for having objects or arrays.

const
    setValue = (object, path, value) => {
        const
            indices = { first: 0, second: 1 },
            keys = path.replace(new RegExp(Object.keys(indices).join('|'), 'g'), k => indices[k]).split('.'),
            last = keys.pop();

        keys
            .reduce((o, k, i, kk) => o[k] ??= isFinite(i + 1 in kk ? kk[i + 1] : last) ? [] : {}, object)
            [last] = value;
            
        return object;
    },
    data = { "dynamic.title": "Lorem Ipsum title", "dynamic.main_section.header.title": "Lorem Ipsum main section header title ", "dynamic.main_section.body.collection.first.title": "Lorem Ipsum main section  body collection first title", "dynamic.main_section.body.collection.first.description": "Lorem Ipsum main section  body collection first description", "dynamic.main_section.body.collection.first.id": "Lorem Ipsum main section  body collection first id", "dynamic.main_section.body.collection.first.child.first.title": "Lorem Ipsum main section  body collection first of first child title ", "dynamic.main_section.body.collection.first.child.first.id": "Lorem Ipsum main section  body collection first of first child id ", "dynamic.main_section.body.collection.first.child.first.url": "https://loremipsum/1", "dynamic.main_section.body.collection.first.child.first.names.first": "John Doe", "dynamic.main_section.body.collection.first.child.first.names.second": "Jane Doe", "dynamic.main_section.body.collection.second.title": "Lorem Ipsum main section  body collection second title", "dynamic.main_section.body.collection.second.description": "Lorem Ipsum main section  body collection second description", "dynamic.main_section.body.collection.second.id": "Lorem Ipsum main section  body collection second id", "dynamic.main_section.body.collection.second.child.first.title": "Lorem Ipsum main section  body collection second of first child title ", "dynamic.main_section.body.collection.second.child.first.id": "Lorem Ipsum main section  body collection second of first child id ", "dynamic.main_section.body.collection.second.child.first.url": "https://loremipsum/2", "dynamic.main_section.body.collection.second.child.second.title": "Lorem Ipsum main section  body collection second of second child title ", "dynamic.main_section.body.collection.second.child.second.id": "Lorem Ipsum main section  body collection second of second child id ", "dynamic.main_section.body.collection.second.child.second.url": "https://loremipsum/3" },
    result = Object
        .entries(data)
        .reduce((r, [k, v]) => setValue(r, k, v), {});

console.log(result);

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

answered Jun 8, 2021 at 18:19

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

7 Comments

dev Over a year ago

Thanks, i will check this. Need to understand will ask if any doubts on this

dev Over a year ago

@ Nina, How could i convert the reverse way from object to json

Nina Scholz Over a year ago

you could try it for yourself and ask a new question if your got no success.

Nina Scholz Over a year ago

@dev, maybe the last comment is a bit hars, but answering a new question in comments is not the right place. anyway, if you show some approach to get a result from a nested structor as a flat result, you could ask for help with a new question.

dev Over a year ago

Sure will create a new question and share it

|

Hamada · Accepted Answer · 2021-06-08 18:52:28Z

I show you the way to transform the data so that you continue with it and even automate it if necessary;

let data = {
        "dynamic.title": "Lorem Ipsum title",
        "dynamic.main_section.header.title": "Lorem Ipsum main section header title ",
        "dynamic.main_section.body.collection.first.title": "Lorem Ipsum main section  body collection first title"
    }
    
dataTrans = {}
//data["dynamic.title"]
dataTrans.dynamic = {}
dataTrans.dynamic.title = data["dynamic.title"]
//data["dynamic.main_section.header.title"]
dataTrans.dynamic.main_section = {} 
dataTrans.dynamic.main_section.header = {}
dataTrans.dynamic.main_section.header.title = data["dynamic.main_section.header.title"]
dataTrans.dynamic.main_section.body = {} 
dataTrans.dynamic.main_section.body.collection = []
dataTrans.dynamic.main_section.body.collection[0] = {}
dataTrans.dynamic.main_section.body.collection[0].title = data["dynamic.main_section.body.collection.first.title"]

console.log(dataTrans)

Collectives™ on Stack Overflow

creating nested object from keys

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related