如何根据内部数组的值过滤二维数组

Question

I have a 2D array that I need to filter based on data of the Inner array

I have tried mapping then filtering the data of the inner array - but then I lose the data from the first array.

I have written a filter function below but it does not work properly- look at filteredData variable

var data = 
[
  {
    "batch_id": "1",
    "data": [
      {

        "identifier": "aa",
        "type": "video"
      },
      {

        "identifier": "ab",
        "type": "image"
      }
    ],
    "internal_batch_id": 72
  },
  {
    "batch_id": "2",
    "data": [
      {

        "identifier": "a",
        "type": "image"
      },
      {

        "identifier": "b",
        "type": "image"
      }
    ],
    "internal_batch_id": 72
  }
]

var type = 'video'

   var  filteredData =
      data.map((item, i) => {
        return item.data.filter((item1, idx) => {
          return item1.type.toUpperCase() === type.toUpperCase()
        })
      })

What I want to happen is that only the items where type === 'video' are shown. So data would become

{
    "batch_id": "1",
    "data": [
      {

        "identifier": "aa",
        "type": "video"
      }

    ],
    "internal_batch_id": 72
  }

Answer 1

I'm not sure what your expected out put is supposed to be. Either, you are looking to use map with filter:

Filter the nested data prop by each type property

 var data = [ { batch_id: '1', data: [{ identifier: 'aa', type: 'video' }, { identifier: 'ab', type: 'image' }], internal_batch_id: 72 }, { batch_id: '2', data: [{ identifier: 'a', type: 'image' }, { identifier: 'b', type: 'image' }], internal_batch_id: 72 } ] console.log(data.map(o => ({...o, data:o.data.filter(v => v.type === 'video')})))

Or you are looking to use filter with some:

Filter entire data object to object where it has a type with 'video'

 var data = [ { batch_id: '1', data: [{ identifier: 'aa', type: 'video' }, { identifier: 'ab', type: 'image' }], internal_batch_id: 72 }, { batch_id: '2', data: [{ identifier: 'a', type: 'image' }, { identifier: 'b', type: 'image' }], internal_batch_id: 72 } ] console.log(data.filter(o => o.data.some(v => v.type === 'video')))

Or, both:

Filter both the entire data object, and filter the nested data.

 var data = [ { batch_id: '1', data: [{ identifier: 'aa', type: 'video' }, { identifier: 'ab', type: 'image' }], internal_batch_id: 72 }, { batch_id: '2', data: [{ identifier: 'a', type: 'image' }, { identifier: 'b', type: 'image' }], internal_batch_id: 72 } ] console.log( data.reduce((a, o) => { const f = o.data.filter(v => v.type === 'video') return (f.length && a.push({ ...o, data: f }), a) }, []) )

Answer 2

You need to perform 2 operations,

• Filter parent list with all objects that has at least 1 video element
• Update above objects to only have video objects inside them.

For this you can use .reduce + .filter

• .reduce to create new object and create array
• .filter to get only filtered items in it.

 var data = [{ "batch_id": "1", "data": [{ "identifier": "aa", "type": "video" }, { "identifier": "ab", "type": "image" } ], "internal_batch_id": 72 }, { "batch_id": "2", "data": [{ "identifier": "a", "type": "image" }, { "identifier": "b", "type": "image" } ], "internal_batch_id": 72 }] var type = 'video' var filteredData = data.reduce((acc, obj) => { const innerObj = obj.data.filter((typeObj) => typeObj.type === type); if(innerObj.length !== 0) { acc.push( { ...obj, data: innerObj} ); } return acc; }, []) console.log(filteredData)