How to Build a Dynamic object on JS From two arrays

Question

I'm trying to build an array of objects from another two arrays, can someone help me out.

const parent =[
  { Id: 1, Cate: 'Accommodation', p_id: null },
  { Id: 4, Cate: 'National Travel', p_id: null }
]

const child =[
  { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 },
  { Id: 3, Cate: 'Own arrangement', p_id: 1 },
  { Id: 5, Cate: 'Air', p_id: 4 },
  { Id: 6, Cate: 'Bus', p_id: 4 },
  { Id: 7, Cate: 'AC Volvo', p_id: 6 },
  { Id: 8, Cate: 'Luxury Bus', p_id: 6 },
  { Id: 9, Cate: 'Bus', p_id: 6 }
]

const data = [
  {
    id: 1,
    tittle: 'Accommodation',
    subItem: [
      { id: 2, tittle: 'Hotel Accommodation', subItems: [] },
      { id: 3, tittle: 'Own arrangement', subItems: [] },
    ],
  },
  {
    id: 4,
    tittle: 'National Travel',
    subItem: [
      { id: 5, tittle: 'Air', subItems: [] },
      {
        id: 6,
        tittle: 'Bus',
        subItem: [
          { id: 7, tittle: 'AC Volvo' },
          { id: 5, tittle: 'Air' },
          { id: 8, tittle: 'Luxury Bus' },
          { id: 9, tittle: 'Bus' },
        ],
      },
    ],
  },
];

parent and child are the data I get from DB, now I need to change that into something looking like data. The thing is it has to be dynamic, as subItems can go long as it needs to be, how can I make something like that?

Answer 1

You can maintain two objects, a parent object, and a seen object. The seen object is responsible for storing all object ids already seen. That means, for each object in your array, you add it to the seen object.

// Seen object
{
  id_1: {id: id_1, ...}, /* id: 1 */
  id_2: {id: id_2, ...}, /* id: 2 */
  id_3: {id: id_3, ...}, /* id: 3 */
  id_4: {id: id_3, ...}  /* id: 4 */
}

As your parent objects come before they are used by your child objects, you can say that, when the p_id does not appear in the seen object, then the current object is a parent, and so, you can add its id to the parents object (in the above example, assume id_1 is a parent). Keep in mind that this object also gets added to seen, and so, we can create a link between the parent object in seen and the one in parents by using its reference:

// Parents object
{
  id_1: /* ref: 1 */ <-- this refers to the seen[id_1] object
}

This link then allows us to change the object in seen, which would then result in the object in parents changing.

When an object is not a parent object, then it must be a child of another object we have already seen. In this example, assume that the object with id_2 is a child/subItem of id_1. We can first find id_2's parent object (ie: the object with id_1) by looking it up in the seen object using seen[p_id]. Once we have the parent object for id_2, we can add a subItem array to it if needed, and add a reference to our id_2 object to this array:

// Seen object
{
  id_1: {id: id_1, ..., subItem: [/* ref: 2 */]}, /* id: 1 */
  id_2: {id: id_2, ...}, /* id: 2 */
}

we add id_2 as a reference by pushing in the object we added to seen by using .push(seen[Id]). We're adding a reference, as this will mean that if we change the object stored at id_2 in our seen object, then its changes will be reflected in id_1's subItem array.

Once we have iterated over all objects in our array, we can grab the values of our parents object, which contains references to the objects in seen, and those objects themselves also (may) contain references to other objects in seen. This gives us our final result:

const parent =[ { Id: 1, Cate: 'Accommodation', p_id: null }, { Id: 4, Cate: 'National Travel', p_id: null } ];
const child = [ { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 }, { Id: 3, Cate: 'Own arrangement', p_id: 1 }, { Id: 5, Cate: 'Air', p_id: 4 }, { Id: 6, Cate: 'Bus', p_id: 4 }, { Id: 7, Cate: 'AC Volvo', p_id: 6 }, { Id: 8, Cate: 'Luxury Bus', p_id: 6 }, { Id: 9, Cate: 'Bus', p_id: 6 } ];

const buildChildren = arr => {
  const parents = {}, seen = {};
  for(const {Id, Cate, p_id} of arr) {
    seen[Id] = {id: Id, title: Cate};
    if(p_id in seen) {
      const myParent = seen[p_id];
      myParent.subItem = myParent.subItem || []; // add subItem property if it doesn't exist yet
      myParent.subItem.push(seen[Id]); 
    } else { // Adding a new parent
      parents[Id] = seen[Id];
    }
    
  }
  return Object.values(parents);
}

console.log(buildChildren([...parent, ...child]));

Answer 2

The more concise and another detailed explanation (Based on @Nick Parsons's idea)

Besides, the problem is that item.Id make sure that it should be sorted ascending.

---

The main ideas are:

1. Push the "parent item" into result.

   //If the first meet item with `parent ID` doesn't exist in store yet, then it should be the parent item
   if(!parentItemInStore) 
      result.push(store[Id]); // Adding a new parent
   

2. Add subItem into the "parent item". By using the Reference Javascript, we can modify the item as well as reflect the reference item.

   else { // add subItem
      parentItemInStore.subItem ??= []; // Using `logical nullish assignment` to initialize subItem
      parentItemInStore.subItem.push(store[Id]); 
    }
   

const parent =[ { Id: 1, Cate: 'Accommodation', p_id: null }, { Id: 4, Cate: 'National Travel', p_id: null } ];
const child = [ { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 }, { Id: 3, Cate: 'Own arrangement', p_id: 1 }, { Id: 5, Cate: 'Air', p_id: 4 }, { Id: 7, Cate: 'AC Volvo', p_id: 6 }, { Id: 6, Cate: 'Bus', p_id: 4 }, { Id: 8, Cate: 'Luxury Bus', p_id: 6 }, { Id: 9, Cate: 'Bus', p_id: 6 } ];

const buildHierarchyCollection = flatItems => {
  flatItems.sort((a, b) => a.Id - b.Id); // this line is extremely important
  const result = [], store = {};
  for(const {Id, Cate, p_id} of flatItems) { 
    store[Id] = {Id, Cate}; // Store each item to keep the reference
    const parentItemInStore = store[p_id];
    if(!parentItemInStore) // If the first meet item with `parent ID` doesn't exist in store yet, then it should be the parent item
      result.push(store[Id]); // Adding a new parent
    else { // add subItem
      parentItemInStore.subItem ??= []; // Using `logical nullish assignment` to initialize subItem
      parentItemInStore.subItem.push(store[Id]); 
    }
  }
  
  return result;
}

console.log(buildHierarchyCollection([...parent, ...child]));

Solution 2: No need to sort

const parent =[ { Id: 1, Cate: 'Accommodation', p_id: null }, { Id: 4, Cate: 'National Travel', p_id: null } ];
const child = [ { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 }, { Id: 3, Cate: 'Own arrangement', p_id: 1 }, { Id: 5, Cate: 'Air', p_id: 4 }, { Id: 7, Cate: 'AC Volvo', p_id: 6 }, { Id: 6, Cate: 'Bus', p_id: 4 }, { Id: 8, Cate: 'Luxury Bus', p_id: 6 }, { Id: 9, Cate: 'Bus', p_id: 6 } ];

const resolveParrentMissing = (store, currentItem) => {
  for(let [key, value] of Object.entries(store))
    if(value.p_id == currentItem.Id) {
      currentItem.subItem ??= [];
      currentItem.subItem.push(value); 
    }
}

const buildHierarchyCollection = flatItems => {
  const result = [], store = {};
  for(const {Id, Cate, p_id} of flatItems) {
    store[Id] = {Id, Cate, p_id}; // Store each item to keep the reference
    const parentItemInStore = store[p_id];
    if(!p_id) // If the first meet item with `parent ID` doesn't exist in store yet, then it should be the parent item
      result.push(store[Id]); // Adding a new parent
    else if(parentItemInStore) { // add subItem
      parentItemInStore.subItem ??= []; // Using `logical nullish assignment` to initialize subItem
      parentItemInStore.subItem.push(store[Id]); 
    }
    
    resolveParrentMissing(store, store[Id]);
  }
  
  return result;
}

const result = buildHierarchyCollection([...parent, ...child]);
console.log(result.map(({p_id, ...rest}) => rest));

Answer 3

I think this approach is simpler than many others presented here.

const makeForest = (xs, id) => 
  xs .filter ((x) => x.p_id == id) 
     .map (({Id, Cate, p_id}, _, __, subItems = makeForest (xs, Id)) => ({
       id: Id, tittle: Cate, ... (subItems.length ? {subItems} : {})
     }))

const parent = [{Id: 1, Cate: 'Accommodation', p_id: null}, {Id: 4, Cate: 'National Travel', p_id: null}]
const child = [{Id: 2, Cate: 'Hotel Accommodation', p_id: 1}, {Id: 3, Cate: 'Own arrangement', p_id: 1}, {Id: 5, Cate: 'Air', p_id: 4}, {Id: 6, Cate: 'Bus', p_id: 4}, {Id: 7, Cate: 'AC Volvo', p_id: 6}, {Id: 8, Cate: 'Luxury Bus', p_id: 6}, {Id: 9, Cate: 'Bus', p_id: 6}]

console .log (
  makeForest ([...parent, ...child])
)

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

We start by combining the two arrays outside our main call. This sort of code is easier to work with on a single list.

We filter out those items whose p_ids match an input parameter (and if we don't pass one, then the ones with null values will also match. Then for each one of those, we build a new object, with subItems being created with a recursive all, using the same list and the current id.

If there are other fields we want to copy over directly, we can just destructure out a ...rest parameter and include it in our mapping:

const makeForest = (xs, id) => 
  xs .filter ((x) => x.p_id == id) 
     .map (({Id, Cate, p_id, ...rest}, _, __, subItems = makeForest (xs, Id)) => ({
       id: Id, tittle: Cate, ... rest, ... (subItems.length ? {subItems} : {})
     }))

Update

Nguyễn Văn Phong pointed out this simplification:

const makeForest = (xs, id) => 
  xs .filter ((x) => x.p_id == id) 
     .map (({Id, Cate, p_id, subItems = makeForest (xs, Id)}) => ({
       id: Id, tittle: Cate, ... (subItems.length ? {subItems} : {})
     }))

which would work equally well with the ...rest case. It's very nice not to need those placeholder variables for the map call.

Answer 4

const parent =[ { Id: 1, Cate: 'Accommodation', p_id: null }, { Id: 4, Cate: 'National Travel', p_id: null } ];
const child = [ { Id: 2, Cate: 'Hotel Accommodation', p_id: 1 }, { Id: 3, Cate: 'Own arrangement', p_id: 1 }, { Id: 5, Cate: 'Air', p_id: 4 }, { Id: 6, Cate: 'Bus', p_id: 4 }, { Id: 7, Cate: 'AC Volvo', p_id: 6 }, { Id: 8, Cate: 'Luxury Bus', p_id: 6 }, { Id: 9, Cate: 'Bus', p_id: 6 } ];

function prepardata(parent, child) {
    // map to hold all the values of parent and child arrays
    const map = {};
    // map to hold final result
    let item = {};
    // add parent elements to map
    for (let i = 0; i < parent.length; i++) {
        map[parent[i].Id] = parent[i];
    }
    // add child elements to map
    for (let i = 0; i < child.length; i++) {
        // adding empty subItems array to every child category
        child[i]["subItems"] = [];
        map[child[i].Id] = child[i];
    }
    /**
     * At this point we have map ready with key as Id and value as
     * the object.
     * Using for-in to iterate over the map where key is Id
     */
    for (let key in map) {
    // if map has a key with value of the current entry p_id (map[key].p_id))
    if (map.hasOwnProperty(map[key].p_id)) {
        let parentCat = map[map[key].p_id];     // parent category element is the entry in map with value equal to p_id
        let childCat = map[key];    // child category element is the entry in map with value equal to key
            // Elements with p_id as null should be at the top level
            if (!parentCat.p_id) {
                // If final item map does not have an entry, then add it
                if (!item[parentCat.Id]) {
                    item[parentCat.Id] = {
                        id: parentCat.Id,
                        title: parentCat.Cate,
                        subItems: [childCat]
                    }
                } else {
                    // else just push the element in the existing parent categories subitems
                    item[parentCat.Id]["subItems"].push(childCat);
                }
            } else {
                // Else it's a sub category, the item needs to be pushed under its subItems array
                if (item[parentCat.p_id]) {
                    item[parentCat.p_id]["subItems"].filter(s => s.Id === childCat.p_id)[0]["subItems"].push(childCat);
                }
            }
        }
    }
    // finally return the values from item map.
    return Object.values(item);
}

const data = prepardata(parent, child);
console.log(data);

You can use javascript map and filter to achieve this result. Iterate over the parent array to get the id and title and filter the child array to get only items with matching p_id.

const data = [];
parent.map(p => {
    const item = {
        id: p.Id,
        title: p.Cate,
        subItem: child.filter(c => c.p_id === p.Id)
    }
    data.push(item);
});

Edit I've added snippet with the updated solution which supports multiple levels as my initial answer only supported 2 levels. Accepted answer by @Nick Parsons is correct and also shorter version but I'm still updating this answer to complete it.