[Vuejs]-Get array of object value and nested array of object value

by

2👍

✅

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);
👤CertainPerformance

1👍

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));
👤SSM

0👍

 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

👤Bhrugu Tundeliya

0👍

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)
👤Yosvel Quintero

0👍

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
}
👤Excited Electron

0👍

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 )
👤PeterKA

0👍

1 – Loop through items array

2 – if there is no subItems array then find the id of the item using condition

3 – if there is a subItems array then loop through that and find the id using condition

const result = []

items.map(item=>{
  item.subItems ? 
    item.subItems.map(sub=>{
      sub.selected && result.push(sub.id)
    }) 
  : item.selected && result.push(item.id)
})

console.log(result) // [1, "2a", 3]
👤Akash NO

0👍

This also works:

var ids = [
    ... items.filter( 
        it => it.selected || (it.subItems && it.subItems.some( sub => sub.selected ))
    )
    .map( it => 
        it.subItems 
            ? it.subItems.filter( it_sub => it_sub.selected ).map( it_sub => it_sub.id ) 
            : [it.id] 
    )
].flat()
👤Jupri

0👍

With resursive of subItems :

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

const getSubItem = (obj) => {
  let result = !obj.hasOwnProperty('subItems') ? [obj] : obj.subItems.reduce((res, item) => {
    return res.concat(getSubItem(item))
  }, [])
  return result.filter(item => item.selected)
}
const result = items.reduce((res, item) => {
  let subItem = getSubItem(item)
  return res.concat(getSubItem(item))
}, [])

console.log(result)
👤Xupitan

Leave a comment