covert Object of Objects to Array of Arrays

Question

I am trying to write a function that converts and object of objects into array of array. The array should have same child as in the objects. The object of object is like:-

world@myId1 : {

       north@myId2:{
           korea@myId21:{
             1:northKorea@myId211,
             2:southKorea@myId212
              }            
           },
       south@myId3:{
            India@myId31:{
                 1:nothIndia@myId311,
                 2: southIndia@myId312
                }
             },
        west@myId4:{
           spain@myId41:{
            1:barcelona@myId411
            }
         },
        east@myId5:{
          UAE@myId51:{
           1:dubai@myId511
           }
         }
   }

I want it transformed to

[{
  "name": "world",
  "id": "myId1",
  "nodes": [{
    "name": "North",
    "id": "myId2",
    "nodes": [{
      "name": "Korea",
      "id": "myId21",
      "nodes": [{
          "name": "NorthKorea",
          "id": "myId211",
          "nodes": []
        },
        {
          "name": "southKorea",
          "id": "myId212",
          "nodes": []
        }
      ]
    }]
  }, {
    "name": "South",
    "id": "myId3",
    "nodes": [{
      "name": "India",
      "id": "myId31",
      "nodes": [{
          "name": "SouthIndia",
          "id": "myId311",
          "nodes": []
        },
        {
          "name": "NorthIndia",
          "id": "myId312",
          "nodes": []
        }

      ]
    }]
  }, {
    "name": "west",
    "id": "myId4",

    "nodes": [{
      "name": "Spain",
      "id": "myId41",
      "nodes": [{
        "name": "barcelona",
        "id": "myId411",
        "nodes": []
      }]
    }]
  }]
}, {
  "name": "East",
  "id": "myId5",
  "nodes": [{
    "name": "UAE",
    "id": "myId51",
    "nodes": [{
      "name": "dubai1",
      "id": "myId511",
      "nodes": []
    }]
  }]
}];

I created a recursive function but it is very slow, as the actual object of objects is very large. I thought that angularjs will call the function asynchronously, but that is not the case.

   fillChid = function (array, data) = {
    var nodeObj = {
      "name": "name",
      "nodes": []
    };
    //caliculate name and id
    var childIndex = -1;
    angular.forEach(data, function (value, key) {
      array.push(presentNode);
      childIndex++;
      if (isNaN(key))
        fillChild(array[childIndex].nodes, value, presentNode.parentString);

    });

  }

I need this data type to show a Tree menu, JSFIDDLE for tree menu code.

Answer 1

You could take a recursive approach and return either the infdormation of the key or value, depending on having subobjects.

 const getObject = (identifier, nodes = []) => { const [name, id] = identifier.split('@'); return { name, id, nodes }; }, getArray = object => Object.entries(object).map(([k, v]) => v && typeof v === 'object'? getObject(k, getArray(v)): getObject(v) ), data = { 'world@myId1': { 'north@myId2': { 'korea@myId21': { 1: 'northKorea@myId211', 2: 'southKorea@myId212' } }, 'south@myId3': { 'India@myId31': { 1: 'nothIndia@myId311', 2: 'southIndia@myId312' } }, 'west@myId4': { 'spain@myId41': { 1: 'barcelona@myId411' } }, 'east@myId5': { 'UAE@myId51': { 1: 'dubai@myId511' } } } }, result = getArray(data); console.log(result);

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

A faster one

 const getObject = (identifier, nodes = []) => { const [name, id] = identifier.split('@'); return { name, id, nodes }; }, getArray = object => { const result = []; for (const [k, v] of Object.entries(object)) result.push(v && typeof v === 'object'? getObject(k, getArray(v)): getObject(v) ); return result; }, data = { 'world@myId1': { 'north@myId2': { 'korea@myId21': { 1: 'northKorea@myId211', 2: 'southKorea@myId212' } }, 'south@myId3': { 'India@myId31': { 1: 'nothIndia@myId311', 2: 'southIndia@myId312' } }, 'west@myId4': { 'spain@myId41': { 1: 'barcelona@myId411' } }, 'east@myId5': { 'UAE@myId51': { 1: 'dubai@myId511' } } } }, result = getArray(data); console.log(result);

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