Restructure the object data when the object key is present inside another object's array in javascript

Question

I have an object data which has properties like "name","date" etc

const data = {
    "name":{
      "columnName":"name",
      "columnType":"name of employee",
      "values":[
        "sam", "son"
      ],
      "range":{
        "min":0,
        "max":0
      }
    },
    "date":{
      "columnName":"date",
      "columnType":"date input",
      "categoricalValues":[
      ],
      "range":{
        "min":0,
        "max":0
      }
    },
    "fare":{
      "columnName":"fare",
      "columnType":"fare indication",
      "values":[
        "false",
        "true"
      ],
      "range":{
        "min":0,
        "max":0
      }
    },
    "id":{
      "columnName":"id",
      "columnType":"id employee",
      "values":[
      ],
      "range":{
        "min":0,
        "max":0
      }
    }
}

Another object categoricalColumns which has some properties which contains an array in which all the property names of the previous object is specified

const categoricalColumns = 
  { 
    "Charges" : ["name" , "fare"],
    "Location" : ["date", "address" ]
  }

If the properties of the object data let's say "name" and "flare" is present inside the categoricalColumns "charges" , I need to restructure the categoricalcolumn object in this format

{
    "title" : "Charges",
    "children" : [
      {
        "name":{
          "columnName":"name",
          "columnType":"name of employee",
          "values":[
            "sam", "son"
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      },
      {
        "fare":{
          "columnName":"fare",
          "columnType":"fare indication",
          "values":[
            "false",
            "true"
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      }
    ]
  }

Expected result :

const result = [
  {
    "title" : "Charges",
    "children" : [
      {
        "name":{
          "columnName":"name",
          "columnType":"name of employee",
          "values":[
            "sam", "son"
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      },
      {
        "fare":{
          "columnName":"fare",
          "columnType":"fare indication",
          "values":[
            "false",
            "true"
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      }
    ]
  },
  {
    "title" : "Location",
    "children" : [
      {
        "date":{
          "columnName":"date",
          "columnType":"date input",
          "categoricalValues":[
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      }
    ]
  },
  {
    title : "Others",
    "children" : [
      {
        "id":{
          "columnName":"id",
          "columnType":"id employee",
          "values":[
          ],
          "range":{
            "min":0,
            "max":0
          }
        }
      }
    ]
  }
]

if some property of data is not matched with any of the categoricalColumns it has to be in the children of "Others" property .

Answer 1

You could take a Set and delete visited columns.

function restructure(data, categories) {
    var others = new Set(Object.keys(data));

    return Object
        .entries(categories)
        .reduce((r, [title, category]) => {
            var children = category.filter(k => k in data).map(k => ({ [k]: data[k] }));
            if (children.length) r.push({ title, children });
            category.forEach(Set.prototype.delete, others);
            return r;
        }, [])
        .concat(others.size
            ? { title: 'Others', children: Array.from(others, k => ({ [k]: data[k] })) }
            : []
        );
}


var data = { name: { columnName: "name", columnType: "name of employee", values: ["sam", "son"], range: { min: 0, max: 0 } }, date: { columnName: "date", columnType: "date input", categoricalValues: [], range: { min: 0, max: 0 } }, fare: { columnName: "fare", columnType: "fare indication", values: ["false", "true"], range: { min: 0, max: 0 } }, id: { columnName: "id", columnType: "id employee", values: [], range: { min: 0, max: 0 } } },
    categoricalColumns = { Charges: ["name", "fare"], Location: ["date", "address"] },
    result = restructure(data, categoricalColumns);

   console.log(result);

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