I've this nested array of object array:

const items = [
    {
      id: 1,
      name: 'banana',
      selected: true,
    },
    {
      id: 2,
      subItems: [
        {
          id: '2a',
          name: 'apple',
          selected: true,
        },
        {
          id: '2b',
          name: 'orange',
          selected: false,
        },
      ],
    },
    {
      id: 3,
      name: 'watermalon',
      selected: true,
    },
    {
        id: 4,
        name: 'pear',
        selected: false,
      },
  ]

How can I get the ids base on selected property?

I manage to get the first level, I've tried

 const selectedItemId = items.map(item => item.selected && item.id).filter(Boolean)

but how can I select the ids which is in the subItems? I expect the result to be [1, '2a', 3]

CodePudding user response：

You can recursively traverse all the items and select the items that have selected set to true.

const items = [
  { id: 1, name: "banana", selected: true },
  {
    id: 2,
    subItems: [
      { id: "2a", name: "apple", selected: true },
      { id: "2b", name: "orange", selected: false },
    ],
  },
  { id: 3, name: "watermalon", selected: true },
  { id: 4, name: "pear", selected: false },
];

function getSelectedItems(items, selectedItems = []) {
  for (let item of items) {
    if (item.subItems) {
      getSelectedItems(item.subItems, selectedItems);
    } else if (item.selected) {
      selectedItems.push(item.id);
    }
  }
  return selectedItems;
}

console.log(getSelectedItems(items));

CodePudding user response：

Flatten the array first. Be careful of using && item.id inside the mapper because that'll mean that falsey IDs (like 0, which is a reasonable starting number in some schemes) will be excluded.

const items=[{id:1,name:"banana",selected:!0},{id:2,subItems:[{id:"2a",name:"apple",selected:!0},{id:"2b",name:"orange",selected:!1}]},{id:3,name:"watermalon",selected:!0},{id:4,name:"pear",selected:!1}];

const output = items
  .flatMap(item => [item].concat(item.subItems ?? []))
  .filter(item => item.selected)
  .map(item => item.id);
console.log(output);

CodePudding user response：

 let newArray = [];
items.forEach(i=>{
    if(i.selected){
    newArray.push(i.id)
    }
    if(i.subItems){
    i.subItems.forEach(j=>{
        if(j.selected){
        newArray.push(j.id)
        }
    })
}
});

so this is bit lengthy. with 2 map loops

CodePudding user response：

You can do:

const items=[{id:1,name:"banana",selected:!0},{id:2,subItems:[{id:"2a",name:"apple",selected:!0},{id:"2b",name:"orange",selected:!1}]},{id:3,name:"watermalon",selected:!0},{id:4,name:"pear",selected:!1}]

const output = items
  .reduce((a, c) => [...a, c, ...(c.subItems || [])], [])
  .filter(o => o.selected)
  .map(({ id }) => id)

console.log(output)

CodePudding user response：

Checking if a subItems array exsist in the item and recusively calling a function to extract selected Items will solve the issue.

function extractSubItems (items){
    var selectItemsId = [];
    selectItemsId = selectItemsId   items.map(item => {
    if (item.selected===true){
        return item.id;
    }
    if (item.subItems){
        return extractSubItems(item.subItems);
    }
    }).filter(Boolean);
    
    return selectItemsId
}

CodePudding user response：

You can use Array#reduce in a nested fashion as follows:

const items = [ { id: 1, name: 'banana', selected: true, }, { id: 2, subItems: [ { id: '2a', name: 'apple', selected: true, }, { id: '2b', name: 'orange', selected: false, }, ], }, { id: 3, name: 'watermalon', selected: true, }, { id: 4, name: 'pear', selected: false, }, ],

      output = items
          .reduce(
              (prev, {id,selected,subItems}) => 
              subItems ?
              selected ?
              [...prev,id,...subItems.reduce( (p, {id:ID,selected:SEL}) => SEL ? [...p,ID] : p, [] )] :
              [...prev,...subItems.reduce( (p, {id:ID,selected:SEL}) => SEL ? [...p,ID] : p, [] )] :
              selected ?
              [...prev,id] :
              prev, []
          );
          
console.log( output )