Convert json into nested JavaScript Object

Question

I have a json int file that contains any items like below:

Input JSON

{
    "action.button.submit": "Submit"
    "action.button.submitting": "Submitting"
    "buttons.common.add": "Add"
    "buttons.common.reset": "Reset"
    "constants.bom.conditional.or.mandatory.conditional": "Conditional"
    "constants.bom.conditional.or.mandatory.mandatory": "Mandatory"
}

Output

{
   action: {
       button: {
           submit: 'Submit'
           submitting: 'Submitting'
       }
   },
   buttons: {
       common: {
           add: 'Add',
           reset: 'Reset'
       }
   },
   constants: {
      bom: {
         conditional: { 
            or: {
                mandatory:{
                   conditional: 'Conditional',
                   mandatory: 'Mandatory'
               }
            }
         }
      }
   }
}

This was as far as I could get:

newData = {};
Object.keys(data).forEach(item => {
    const splitData = item.split('.');
    splitData.forEach((detail, index) => {
        if(index === 0 && !newData[detail]) newData[detail] = {};
    })
});
console.info(newData)

I would like to take the Input and make it look like the output

Thanks for taking the time to write that. I also see it has 2 upvotes, so its not just you. Though I thought the title made it clear of what I am after. I will update the questions :) — Jamie Hutber
– Jamie Hutber, Commented Feb 15, 2019 at 14:10

Jonas Wilms · Accepted Answer · 2019-02-15 14:13:46Z

1

You have to recursively traverse deep into the resulting object:

function parse(obj) {
  const root = {};

  for(const [key, value] of Object.entries(obj)) {
    const parts = key.split(".");
    const parent = parts.slice(0, -1).reduce((acc, part) => acc[part] || (acc[part] = {}), root);
    parent[parts.pop()] = value;
  }

  return root;
}

edited Feb 15, 2019 at 14:13

answered Feb 15, 2019 at 14:08

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Nenad Vracar · Accepted Answer · 2019-02-15 14:20:47Z

1

You could use one forEach loop on object entries and then inside split each key on .. After that you can use reduce method on that array of keys to build nested object.

const obj = {
  "action.button.submit": "Submit",
  "action.button.submitting": "Submitting",
  "buttons.common.add": "Add",
  "buttons.common.reset": "Reset",
  "constants.bom.conditional.or.mandatory.conditional": "Conditional",
  "constants.bom.conditional.or.mandatory.mandatory": "Mandatory"
}

const res = {}
Object.entries(obj).forEach(([key, value]) => {
  key.split('.').reduce((r, e, i, a) => {
    return r[e] || (r[e] = (a[i + 1] ? {} : value))
  }, res)
})

console.log(res)

Using Lodash you can do this with _.set method that takes target object, nested key and value.

const obj = {"action.button.submit": "Submit","action.button.submitting": "Submitting","buttons.common.add": "Add","buttons.common.reset": "Reset","constants.bom.conditional.or.mandatory.conditional": "Conditional","constants.bom.conditional.or.mandatory.mandatory": "Mandatory"}

const res = {}
_.forEach(_.entries(obj), ([k, v]) => _.set(res, k, v))
console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

edited Feb 15, 2019 at 14:20

answered Feb 15, 2019 at 14:08

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

2 Comments

Jamie Hutber Over a year ago

Been doing JS for a long time, not been doing much the last few months and already can't handle this simple thing

Nenad Vracar Over a year ago

@Jamie Hutber It's not too simple

Collectives™ on Stack Overflow

Convert json into nested JavaScript Object

Input JSON

Output

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Input JSON

Output

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related