How to create an correct array structure based on a previous array of objects? JavaScript - Reactjs

MoiOcanas
February 23, 2023
160 views
3 votes
3 Answers

hope you doing well. I have a question about how to clean up an array and make it a new one. I give you context, I have the following array:

const array = [
 { id: 1, parentId: null, name: Example },
 { id: 2, parentId: 1, name: Example },
 { id: 3, parentId: 1, name: Example },
 { id: 4, parentId: 1, name: Example },
 { id: 5, parentId: 2, name: Example },
 { id: 6, parentId: 2, name: Example },
 { id: 7, parentId: 6, name: Example },
 { id: 8, parentId: 7, name: Example },
 { id: 9, parentId: 7, name: Example },
];

I would like to know how I can convert it into an array structured in such a way that the first elements are the ones that are connected to the smallest parentId, in this case 1. And later, according to this value, new arrays are formed within its object. For example:

const array = [
 { id: 1, parentId: null, name: Example },
 { id: 2, parentId: 1, name: Example },
 { id: 3, parentId: 1, name: Example },
 { id: 4, parentId: 1, name: Example },
 { id: 5, parentId: 2, name: Example },
 { id: 6, parentId: 2, name: Example },
 { id: 7, parentId: 6, name: Example },
 { id: 8, parentId: 7, name: Example },
 { id: 9, parentId: 7, name: Example },
];

Into this:

const array = [
 { 
   id: 1, 
   parentId: null, 
   name: Example,
   options: [
    { 
      id: 2, 
      parentId: 1, 
      name: Example,
      options: [
       { id: 5, parentId: 2, name: Example },
       { id: 6, parentId: 2, name: Example },
      ]
    },
    { id: 3, parentId: 1, name: Example },
    { id: 4, parentId: 1, name: Example },
    { 
     id: 7, 
     parentId: 1, 
     name: Example,
     options: [
      { id: 8, parentId: 7, name: Example },
      { id: 9, parentId: 7, name: Example },
     ]
    },
   ]
 },
];

The array now sorts its options based on the parent id. Could anyone help me? I really find myself confused.

I tried using the map method, but its getting hard after some elements.

Answers

It can help you. 🙂

const array = [
  { id: 1, parentId: null, name: 'Example' },
  { id: 2, parentId: 1, name: 'Example' },
  { id: 3, parentId: 1, name: 'Example' },
  { id: 4, parentId: 1, name: 'Example' },
  { id: 5, parentId: 2, name: 'Example' },
  { id: 6, parentId: 2, name: 'Example' },
  { id: 7, parentId: 6, name: 'Example' },
  { id: 8, parentId: 7, name: 'Example' },
  { id: 9, parentId: 7, name: 'Example' },
];

const objDict = {};

array.forEach((v, i) => {
  if (!objDict[v.parentId]) objDict[v.parentId] = {};
  objDict[v.parentId].options = objDict[v.parentId].options || [];

  if (!objDict[v.id]) objDict[v.id] = v;
  objDict[v.parentId].options.push(objDict[v.id]);
})

console.log(objDict[null].options);

You can use a recursive function for this. The function assumes that the top-level items have parentId of null. If this is not the case, you may need to modify the function to pass in the top-level parentId value as an argument.

function convertArray(arr, parentId = null) {
  const result = [];
  // We iterate over each item.
  for (const item of arr) {
    // If the item `parentId` matches the one received as parameter, 
    // this means the item is a child of the current parent node, 
    // and the function needs to recursively process its children.
    if (item.parentId === parentId) {
      // We copy the current item.
      const newItem = { ...item };
      // we call this function recursively with the `id` property of 
      // the current item as the new `parentId` parameter.
      // The results of the call is stored in the options property of `newItem`.
      // This creates a nested array of objects representing the child nodes.
      newItem.options = convertArray(arr, item.id);
      // We pushes newItem onto the result array.
      result.push(newItem);
    }
  }
  // Once all items in the input array have been processed, we return the result.
  return result;
}

const array = [
 { id: 1, parentId: null, name: 'Example' },
 { id: 2, parentId: 1, name: 'Example' },
 { id: 3, parentId: 1, name: 'Example' },
 { id: 4, parentId: 1, name: 'Example' },
 { id: 5, parentId: 2, name: 'Example' },
 { id: 6, parentId: 2, name: 'Example' },
 { id: 7, parentId: 6, name: 'Example' },
 { id: 8, parentId: 7, name: 'Example' },
 { id: 9, parentId: 7, name: 'Example' },
];
console.log('Results for the array from your example: ', convertArray(array));

I added comments in the snippets to explain what it does exactly.

const data = [
  { id: 1, parentId: null, name: 'Example' },
  { id: 2, parentId: 1, name: 'Example' },
  { id: 3, parentId: 1, name: 'Example' },
  { id: 4, parentId: 1, name: 'Example' },
  { id: 5, parentId: 2, name: 'Example' },
  { id: 6, parentId: 2, name: 'Example' },
  { id: 7, parentId: 6, name: 'Example' },
  { id: 8, parentId: 7, name: 'Example' },
  { id: 9, parentId: 7, name: 'Example' } 
];

// maintain references to all parents for quick lookup
let refs = {};

// store the resulting arr
let result = [];

data.forEach(item => { 
  const obj = {
    id: item.id,
    parentId: item.parentId,
    name: item.name,
    options: []
  };

  // add the new object to the `refs` list of all parents
  refs[obj.id] = obj; 

  // if the parent is already present, add the object to its children
  if (refs[obj.parentId]) {
    refs[obj.parentId].options.push(obj);
  } else {  
    // otherwise, add it directly to the `result`
    result.push(obj);  
  }
});

console.log(result)

Please signup or login to give your own answer.

Click here to cancel reply.

How to create an correct array structure based on a previous array of objects? JavaScript – Reactjs

Answers