Convert a nested array of objects to an array containing only objects

Question

Convert a nested array of objects to an array containing only objects

I have a unique challenge with an array of nested objects. How can I create a new array of objects by extracting values from nested properties? In cases where the onClick property is empty, I need to look for a children property and exclude the parent element from the new list. My goal is to iterate through the children array and retrieve the values. Please refer to the desired output provided below.

const headers = [{
    title: 'Arun',
    id: 'arunId',
    onClick: 'onClickArun'
  },
  {
    title: "George",
    id: 'georgeId',
    onClick: '',
    children: [{
        title: 'David',
        id: 'davidId',
        onClick: 'onClickDavid'
      },
      {
        title: 'Patrick',
        id: 'patrickId',
        onClick: 'onClickPatrick'
      }
    ]
  },
  {
    title: 'Mark',
    id: 'markId',
    onClick: 'onClickMark'
  }
];

console.log(headers.map(item => {
  return {
    title: item.title,
    onClick: item.onClick
  }
}))

Desired Output:

[{
    title: 'Arun',
    onClick: 'onClickArun'
  },
  {
    title: 'David',
    onClick: 'onClickDavid'
  },
  {
    title: 'Patrick',
    onClick: 'onClickPatrick'
  },
  {
    title: 'Mark',
    onClick: 'onClickMark'
  }
]

Any assistance would be highly valued.

javascript arrays

Answer 1

Answer №1

To achieve this, you can utilize the Array#flatMap method along with a recursive callback.

const
    map = ({ title, onClick, children }) => onClick
        ? { title, onClick }
        : children.map(map);

var headers = [{ title: 'Arun', id: 'arunId', onClick: 'onClickArun' }, { title: "George", id: 'georgeId', onClick: '', children: [{ title: 'David', id: 'davidId', onClick: 'onClickDavid' }, { title: 'Patrick', id: 'patrickId', onClick: 'onClickPatrick' }] }, { title: 'Mark', id: 'markId', onClick: 'onClickMark' }],        
    result = headers.flatMap(map);

console.log(result);

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

Answer 2

To achieve this, you can utilize the Array#flatMap method along with a recursive callback.

const
    map = ({ title, onClick, children }) => onClick
        ? { title, onClick }
        : children.map(map);

var headers = [{ title: 'Arun', id: 'arunId', onClick: 'onClickArun' }, { title: "George", id: 'georgeId', onClick: '', children: [{ title: 'David', id: 'davidId', onClick: 'onClickDavid' }, { title: 'Patrick', id: 'patrickId', onClick: 'onClickPatrick' }] }, { title: 'Mark', id: 'markId', onClick: 'onClickMark' }],        
    result = headers.flatMap(map);

console.log(result);

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

Answer 3

Answer №2

To achieve this functionality, you can utilize the Array.prototype.reduce method. In this case, you simply need to verify whether the parent's onClick property is empty and if the children property exists:

var headers = [{ title: 'Arun', id: 'arunId', onClick: 'onClickArun' }, { title: "George", id: 'georgeId', onClick: '', children: [{ title: 'David', id: 'davidId', onClick: 'onClickDavid' }, { title: 'Patrick', id: 'patrickId', onClick: 'onClickPatrick' }] }, { title: 'Mark', id: 'markId', onClick: 'onClickMark' }];


function getObject(headers, acc){
  return headers.reduce((acc, ele) => {
   if(!ele.onClick.length && ele.children){
      acc = getObject(ele.children, acc);
   }else{
      acc.push({"title": ele.title, "onClick": ele.onClick});
   }
   return acc;
  }, acc);
}
console.log(getObject(headers, []));

Answer 4

To achieve this functionality, you can utilize the Array.prototype.reduce method. In this case, you simply need to verify whether the parent's onClick property is empty and if the children property exists:

var headers = [{ title: 'Arun', id: 'arunId', onClick: 'onClickArun' }, { title: "George", id: 'georgeId', onClick: '', children: [{ title: 'David', id: 'davidId', onClick: 'onClickDavid' }, { title: 'Patrick', id: 'patrickId', onClick: 'onClickPatrick' }] }, { title: 'Mark', id: 'markId', onClick: 'onClickMark' }];


function getObject(headers, acc){
  return headers.reduce((acc, ele) => {
   if(!ele.onClick.length && ele.children){
      acc = getObject(ele.children, acc);
   }else{
      acc.push({"title": ele.title, "onClick": ele.onClick});
   }
   return acc;
  }, acc);
}
console.log(getObject(headers, []));

Answer 5

Answer №3

It appears that a depth-first search is the solution you need. By iterating through the array, you can recursively process each item with children and continue passing along the existing array. For items without children, simply add them to the list.

function retrieveChildren(array, result = []) {
  for (let item of array) {
    if (item.children) {
      retrieveChildren(item.children, result);
    } else {
      result.push({
        title: item.title,
        onClick: item.onClick
      });
    }
  }
  return result;
}

Answer 6

It appears that a depth-first search is the solution you need. By iterating through the array, you can recursively process each item with children and continue passing along the existing array. For items without children, simply add them to the list.

function retrieveChildren(array, result = []) {
  for (let item of array) {
    if (item.children) {
      retrieveChildren(item.children, result);
    } else {
      result.push({
        title: item.title,
        onClick: item.onClick
      });
    }
  }
  return result;
}

Answer 7

Answer №4

const headerElements = [{
  title: 'Arun',
  id: 'arunId',
  onClick: 'onClickArun'
},
{
  title: "George",
  id: 'georgeId',
  onClick: '',
  children: [{
    title: 'David',
    id: 'davidId',
    onClick: 'onClickDavid'
  },
  {
    title: 'Patrick',
    id: 'patrickId',
    onClick: 'onClickPatrick'
  }
  ]
},
{
  title: 'Mark',
  id: 'markId',
  onClick: 'onClickMark'
}
]
// Filtering out children with empty onClick
.map(item => item.onClick ? item : item.children)
// Creating flat array
const headers = [].concat.apply([], headerElements)
    .map(item => { 
        const temp = {};
        temp.title = item.title;
        temp.onClick = item.onClick;
        return temp; // Extracting onClick and title from each item
})

Answer 8

const headerElements = [{
  title: 'Arun',
  id: 'arunId',
  onClick: 'onClickArun'
},
{
  title: "George",
  id: 'georgeId',
  onClick: '',
  children: [{
    title: 'David',
    id: 'davidId',
    onClick: 'onClickDavid'
  },
  {
    title: 'Patrick',
    id: 'patrickId',
    onClick: 'onClickPatrick'
  }
  ]
},
{
  title: 'Mark',
  id: 'markId',
  onClick: 'onClickMark'
}
]
// Filtering out children with empty onClick
.map(item => item.onClick ? item : item.children)
// Creating flat array
const headers = [].concat.apply([], headerElements)
    .map(item => { 
        const temp = {};
        temp.title = item.title;
        temp.onClick = item.onClick;
        return temp; // Extracting onClick and title from each item
})

Convert a nested array of objects to an array containing only objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The onInvoke hook in Zone.js is receiving an inaccurate currentZone value

Access exclusive content by subscribing now!

Retrieving POST data from requests in Node.js

I am having difficulty accessing the environment variable stored in my Azure App Service configuration within my REACT application

Implementing automatic selection mode in Kendo MVC grid

The JComboBox, filled with a string array using a for loop, isn't showing up on the

Is there an Angular Profile service offering getter and setter properties?

With a simple click of a button, I aim to have the ability to set a variable to true

Obscured painting surface appearance using Three.js

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

Generating a dynamic form by utilizing a JavaScript JSON object

Challenges with JSON Documents

Send a parameter to a React hook

Having trouble with installing the most recent versions of React App dependencies

Assigning a JavaScript code block to execute exclusively on designated pages

"Discover the power of Algolia's docSearch feature

What could be the reason for the unexpected "undefined" return value of this custom hook in

I'm looking to leverage axios and useState-useEffect to collect data from numerous web pages. Any suggestions on how to do this efficiently

How to locate every JavaScript event connected with an HTML element by utilizing Google Chrome

"Jquery with 3 buttons for toggling on and off individually, as well