What is the best way to filter an array based on the property of its inner array?

Question

What is the best way to filter an array based on the property of its inner array?

I am grappling with the following array of objects:

let a = [
    {
        b: [1, 11, 12],
        c: "a1"
    },
    {
        b: [2, 56, 1],
        c: "a2"
    },
    {
        b: [1, 2, 3],
        c: "a3"
    }
]

In search of an operation that is both simple and efficient, I wish to extract a second array from a that contains only elements with values exceeding 10 in their b arrays. For these selected elements, I want their corresponding b arrays to include solely the values greater than 10. The desired output is:

[
    {
        b: [11, 12],
        c: "a1"
    },
    {
        b: [56],
        c: "a2"
    }
]

While I could achieve this through traditional looping or using multiple steps such as filter(), I am hopeful for a more streamlined one-line solution. Any recommendations?

javascript arrays filter map-function

Answer 1

Answer №1

Here is an example using filter and reduce:

let items = [{numbers:[1,11,12],letter:"a1"},{numbers:[2,56,1],letter:"a2"},{numbers:[1,2,3],letter:"a3"}]

const result = items.reduce((acc, { numbers, letter }) => {
  // filter out numbers greater than 10
  const filteredNumbers = numbers.filter(num => num > 10);
  
  if (filteredNumbers.length)
    acc.push({ numbers: filteredNumbers, letter });
    
  return acc;
}, [])

console.log(result)

Answer 2

Here is an example using filter and reduce:

let items = [{numbers:[1,11,12],letter:"a1"},{numbers:[2,56,1],letter:"a2"},{numbers:[1,2,3],letter:"a3"}]

const result = items.reduce((acc, { numbers, letter }) => {
  // filter out numbers greater than 10
  const filteredNumbers = numbers.filter(num => num > 10);
  
  if (filteredNumbers.length)
    acc.push({ numbers: filteredNumbers, letter });
    
  return acc;
}, [])

console.log(result)

Answer 3

Answer №2

To achieve the desired result, you can utilize both .filter() and .map() in your code:

let data = [{
    values: [1, 11, 12],
    category: "a1"
}, {
    values: [2, 56, 1],
    category: "a2"
}, {
    values: [1, 2, 3],
    category: "a3"
}];

let filteredData = data.filter(({ values }) => values.some(val => val > 10))
         .map(obj => Object.assign({}, obj, {values: obj.values.filter(val => val > 10)}));

console.log(filteredData);

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

Answer 4

To achieve the desired result, you can utilize both .filter() and .map() in your code:

let data = [{
    values: [1, 11, 12],
    category: "a1"
}, {
    values: [2, 56, 1],
    category: "a2"
}, {
    values: [1, 2, 3],
    category: "a3"
}];

let filteredData = data.filter(({ values }) => values.some(val => val > 10))
         .map(obj => Object.assign({}, obj, {values: obj.values.filter(val => val > 10)}));

console.log(filteredData);

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

Answer 5

Answer №3

To simplify your code, you can utilize the reduce and filter functions

const data = [{b: [1, 11, 12],c: "a1"},{b: [2, 56, 1],c: "a2"},{b: [1, 2, 3],c: "a3"}]


const result = data.reduce((output,{b,c})=>{
  const filteredValues = b.filter(value => value > 10);
  if(filteredValues.length){
    output.push( { b : filteredValues,c })
  } 
  return output
},[])

console.log(result)

Answer 6

To simplify your code, you can utilize the reduce and filter functions

const data = [{b: [1, 11, 12],c: "a1"},{b: [2, 56, 1],c: "a2"},{b: [1, 2, 3],c: "a3"}]


const result = data.reduce((output,{b,c})=>{
  const filteredValues = b.filter(value => value > 10);
  if(filteredValues.length){
    output.push( { b : filteredValues,c })
  } 
  return output
},[])

console.log(result)

Answer 7

Answer №4

Here is an easy method to accomplish this task.

let x = [
    {
        y: [5, 15, 25],
        z: "abc"
    },
    {
        y: [3, 33, 7],
        z: "def"
    },
    {
        y: [8, 9, 10],
        z: "hij"
    }
]

var output = [];
x.forEach((element) => {
var subElement = { z: element.z, y: element.y.filter((y)=> y > 20)}
if (subElement.y.length>0)
     output.push(subElement);
});

console.log(output)

Answer 8

Here is an easy method to accomplish this task.

let x = [
    {
        y: [5, 15, 25],
        z: "abc"
    },
    {
        y: [3, 33, 7],
        z: "def"
    },
    {
        y: [8, 9, 10],
        z: "hij"
    }
]

var output = [];
x.forEach((element) => {
var subElement = { z: element.z, y: element.y.filter((y)=> y > 20)}
if (subElement.y.length>0)
     output.push(subElement);
});

console.log(output)

Answer 9

Answer №5

const filteredResult = a.map((item) => {item.b.filter((bItem) => bItem > 10), item.c}).filter((item) => item.b.length == 0);

Answer 10

const filteredResult = a.map((item) => {item.b.filter((bItem) => bItem > 10), item.c}).filter((item) => item.b.length == 0);

Answer 11

Answer №6

Some insightful responses above. Here's my perspective:

let filteredArr = originalArray.slice().filter(item => {
    item.values = item.values.filter(val => val > 20)
  return (item.values.length > 0) ? true : false;
})

Answer 12

Some insightful responses above. Here's my perspective:

let filteredArr = originalArray.slice().filter(item => {
    item.values = item.values.filter(val => val > 20)
  return (item.values.length > 0) ? true : false;
})

Answer 13

Answer №7

UPDATE I have reviewed all the insightful answers provided here and I appreciate the effort everyone has put into sharing their ideas. After careful consideration, here is the solution I have come up with:

a.filter(x => x.b.some(y => y>10)).map((z) => {
    return {
        b: z.b.filter(zb => zb>10),
        c: z.c
    }
})

Explanation:

The 'a' array is filtered to only include elements where element 'b' contains at least one value greater than 10. The third element in 'a' does not meet this condition and is therefore excluded from the new array. After filtering, we get:

[
    {
        b: [1, 11, 12],
        c: "a1"
    },
    {
        b: [2, 56, 1],
        c: "a2"
    }
]

Subsequently, each element in the newly filtered array is mapped to a new array that retains the same 'c' value but only includes elements in 'b' that are greater than 10. This results in:

[
    {
        b: [11, 12],
        c: "a1"
    },
    {
        b: [56],
        c: "a2"
    }
]

I want to express my gratitude for your valuable inputs and contributions!

Answer 14

UPDATE I have reviewed all the insightful answers provided here and I appreciate the effort everyone has put into sharing their ideas. After careful consideration, here is the solution I have come up with:

a.filter(x => x.b.some(y => y>10)).map((z) => {
    return {
        b: z.b.filter(zb => zb>10),
        c: z.c
    }
})

Explanation:

The 'a' array is filtered to only include elements where element 'b' contains at least one value greater than 10. The third element in 'a' does not meet this condition and is therefore excluded from the new array. After filtering, we get:

[
    {
        b: [1, 11, 12],
        c: "a1"
    },
    {
        b: [2, 56, 1],
        c: "a2"
    }
]

Subsequently, each element in the newly filtered array is mapped to a new array that retains the same 'c' value but only includes elements in 'b' that are greater than 10. This results in:

[
    {
        b: [11, 12],
        c: "a1"
    },
    {
        b: [56],
        c: "a2"
    }
]

I want to express my gratitude for your valuable inputs and contributions!

Answer 15

Answer №8

Instead of the standard solution, here is an alternative method using nested filters().

This approach hinges on the idea that if any element in the b array exceeds 10, then filtering it based on the previous condition will yield a non-empty array.

It's important to note that this procedure does not alter the original array, as it operates on a copy of the array passed to the filters.

let a = [
    {b: [1, 11, 12], c: "a1"},
    {b: [2, 56, 1], c: "a2"},
    {b: [1, 2, 3], c: "a3"}
]

let res = a.filter(
    ({b}, i, arr) => (arr[i].b = b.filter(x => x > 10)) && arr[i].b.length > 0
);

console.log(res);

Answer 16

Instead of the standard solution, here is an alternative method using nested filters().

This approach hinges on the idea that if any element in the b array exceeds 10, then filtering it based on the previous condition will yield a non-empty array.

It's important to note that this procedure does not alter the original array, as it operates on a copy of the array passed to the filters.

let a = [
    {b: [1, 11, 12], c: "a1"},
    {b: [2, 56, 1], c: "a2"},
    {b: [1, 2, 3], c: "a3"}
]

let res = a.filter(
    ({b}, i, arr) => (arr[i].b = b.filter(x => x > 10)) && arr[i].b.length > 0
);

console.log(res);

What is the best way to filter an array based on the property of its inner array?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Guide on integrating a plain Service/Provider into nest.js

What could be causing the issue with setting a value for a JSON array in the following method?

Using recycled frame buffers in a threejs fragment shader

Displaying XML data in an HTML table

Unleash the power of a module by exposing it to the global Window object using the dynamic

The width:auto attribute for images in ie6 is not functioning as expected

Showcase -solely one property object- from numerous property objects enclosed within an array

What steps can you take to address Git conflicts within the yarn.lock file?

Tips for deploying an Angular application with Node.js

NodeJS application experiencing significant delays due to slow response times from MySQL database queries

Switch out the content within a div upon selection

Error: The function .join is not recognized by the sockets.io library in a Node.js client-server environment

What is the best way to halt an event using jQuery?

Adjusting solely the numeric values within a combined array containing both associative and numerical elements

Click the button to insert a time stamp into the text area

Using Ramda, learn how to transform a flat list into a hierarchical one

Popovers in Bootstrap 4 do not have clickable Custom Forms

Fixing the Angular2 glitch: 'Uncaught TypeError: Cannot read property 'apply' of undefined'

What is the equivalent of preg_replace in PHP using jquery/javascript replace?

How to efficiently search MongoDB for existing records and group them by unique array values