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, Jun 08 '21 at 18:07

score 2 · Accepted Answer · answered Jun 08 '21 at 18:19

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; }

Thanks, i will check this. Need to understand will ask if any doubts on this — dev, Jun 08 '21 at 19:14
@ Nina, How could i convert the reverse way from object to json — dev, Jun 09 '21 at 17:40
you could try it for yourself and ask a new question if your got no success. — Nina Scholz, Jun 09 '21 at 17:42
@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. — Nina Scholz, Jun 09 '21 at 17:48
please have a look here in advance: https://stackoverflow.com/questions/34513964/how-to-convert-this-nested-object-into-a-flat-object — Nina Scholz, Jun 09 '21 at 17:52
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/233570/discussion-between-dev-and-nina-scholz). — dev, Jun 09 '21 at 17:54

score 0 · Answer 2 · answered Jun 08 '21 at 18:52

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)

creating nested object from keys

2 Answers2