Filtrer un tableau d'objets imbriqués en tableau d'objets

Question

J'ai un tableau d'objets qui est imbriqué. Comment puis-je créer un tableau d'objets dont celui-ci reçoit également les valeurs des propriétés imbriquées ? Si la propriété onClick est vide, cela signifie qu'il existe une propriété appelée children et que l'élément parent ne doit pas faire partie de la nouvelle liste. J'ai besoin de boucler le tableau des enfants et de récupérer les valeurs. Veuillez voir le résultat attendu ci-dessous.

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
  }
}))

Résultats attendus :

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

Toute aide est la bienvenue.

Answer 1

Vous pourriez prendre Array#flatMap avec un rappel récursif.

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

Vous pouvez le faire en utilisant Array.prototype.reduce où il suffit de vérifier si le parent onClick est vide et le children L'accessoire est présent ou non :

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 3

On dirait que vous avez besoin d'une première recherche approfondie. Vous exécutez sur le tableau, pour chaque élément avec des enfants, vous faites une récursion sur celui-ci et vous transmettez le tableau existant. Sinon, vous ajoutez l'élément à la liste.

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

Answer 4

let 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'
}
]
// take children, only if onClick is empty
.map(item => item.onClick ? item : item.children)
// make flat array
headers = [].concat.apply([], headers)
    .map(item => { 
        const temp = {};
        temp.title = item.title;
        temp.onClick = item.onClick;
        return temp; // take only onClick and title property from each item
})