将json转换为嵌套的JavaScript对象

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

Answer 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> 

Answer 2

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