Sort through a collection of arrays that each contain objects

Question

Sort through a collection of arrays that each contain objects

Having a challenge filtering a multidimensional array with objects within the inner arrays. Despite following examples found here, I'm still unable to successfully filter my array as desired.

let arr = [ { name: 'brent', age: 123 } ];

Although I can see the filter function working when console logging, the result is always returning undefined and I can't figure out why.

let filteredData = [];
let responseData.results = [...]; //The contents of this array are below in the next block

filteredData = responseData.results.forEach((group) =>
{
    group.filter(({ customerName }) => customerName.includes(searchTerm));
});

console.log(filteredData); //returns as undefined?

let responseData.results = [
  ...
]

javascript arrays

Answer 1

Answer №1

There are two common approaches to tackle this issue.

You can start by using a map:

const filteredData = responseData.results.map((group) => {
  return group.filter(({ customerName }) => customerName.includes(searchTerm));
});

Alternatively, you can opt for a shorter syntax with implicit inline return:

const filteredData = responseData.results.map((group) =>
  group.filter(({ customerName }) => customerName.includes(searchTerm))
);

Another option is utilizing reduce to eliminate non-filtered objects from responseData.

const filteredData = responseData.results.reduce((result, group) => {
  const match = group.filter(({ customerName }) =>
    customerName.includes(searchTerm)
  );
  if (match) result.push(match);
  return result;
}, []);

For further insights:

MDN - reduce()

MDN - map()

Answer 2

There are two common approaches to tackle this issue.

You can start by using a map:

const filteredData = responseData.results.map((group) => {
  return group.filter(({ customerName }) => customerName.includes(searchTerm));
});

Alternatively, you can opt for a shorter syntax with implicit inline return:

const filteredData = responseData.results.map((group) =>
  group.filter(({ customerName }) => customerName.includes(searchTerm))
);

Another option is utilizing reduce to eliminate non-filtered objects from responseData.

const filteredData = responseData.results.reduce((result, group) => {
  const match = group.filter(({ customerName }) =>
    customerName.includes(searchTerm)
  );
  if (match) result.push(match);
  return result;
}, []);

For further insights:

MDN - reduce()

MDN - map()

Answer 3

Answer №2

The issue here is a simple error in variable naming. The variable filteredData has not been updated properly. Simply rename filteredLicenses to filteredData and the problem should be resolved.

Answer 4

The issue here is a simple error in variable naming. The variable filteredData has not been updated properly. Simply rename filteredLicenses to filteredData and the problem should be resolved.

Answer 5

Answer №3

To effectively filter each group (sub array) and add only the filtered groups with at least one item to the resulting array, you can utilize the reduce method. On the other hand, using the map method might insert empty groups into the resulting array, which is why it's advisable to use reduce for better handling.

Check out this live demo:

const results = [
    [{
        "id": "e62d6610-04aa-4e92-806f-0449ab3becad",
        "customerName": "Immunics",
        "enduserName": "Everest",
        "productId": 4,
        "productName": "fugiat",
        "createdBy": "Keith",
        "created": "2013-10-31",
        "expires": "2011-03-03"
      },
      {
        "id": "3be2967d-cd92-488b-97e3-a8001da6d1c5",
        "customerName": "Techtrix",
        "enduserName": "Lunchpad",
        "productId": 2,
        "productName": "sit",
        "createdBy": "Odessa",
        "created": "2010-02-25",
        "expires": "2011-05-22"
      },
      {
        "id": "a67861ae-4e1b-4637-af45-096d6ed7a50f",
        "customerName": "Kaggle",
        "enduserName": "Strezzo",
        "productId": 4,
        "productName": "consequat",
        "createdBy": "Matilda",
        "created": "2010-09-05",
        "expires": "2011-08-01"
      },
      {
        "id": "182f84d5-fc27-414c-b011-0e26a9b8e688",
        "customerName": "Idealis",
        "enduserName": "Blurrybus",
...
...long snippet continues

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

Answer 6

To effectively filter each group (sub array) and add only the filtered groups with at least one item to the resulting array, you can utilize the reduce method. On the other hand, using the map method might insert empty groups into the resulting array, which is why it's advisable to use reduce for better handling.

Check out this live demo:

const results = [
    [{
        "id": "e62d6610-04aa-4e92-806f-0449ab3becad",
        "customerName": "Immunics",
        "enduserName": "Everest",
        "productId": 4,
        "productName": "fugiat",
        "createdBy": "Keith",
        "created": "2013-10-31",
        "expires": "2011-03-03"
      },
      {
        "id": "3be2967d-cd92-488b-97e3-a8001da6d1c5",
        "customerName": "Techtrix",
        "enduserName": "Lunchpad",
        "productId": 2,
        "productName": "sit",
        "createdBy": "Odessa",
        "created": "2010-02-25",
        "expires": "2011-05-22"
      },
      {
        "id": "a67861ae-4e1b-4637-af45-096d6ed7a50f",
        "customerName": "Kaggle",
        "enduserName": "Strezzo",
        "productId": 4,
        "productName": "consequat",
        "createdBy": "Matilda",
        "created": "2010-09-05",
        "expires": "2011-08-01"
      },
      {
        "id": "182f84d5-fc27-414c-b011-0e26a9b8e688",
        "customerName": "Idealis",
        "enduserName": "Blurrybus",
...
...long snippet continues

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

Sort through a collection of arrays that each contain objects

Answer №1

Answer №2

Answer №3

Similar questions

Trouble with Google Maps API clicking on url links

What steps do I need to take to ensure NextJS stores my edits in VSCode?

Is it possible to convert milliseconds into the format HH:MM:SS:UU using either JavaScript or PHP?

Transferring data from one page to another using form variables

Organize a series of <span> elements into rows and columns through the use of CSS, JavaScript, or jQuery

How can I prevent the angularFire $add(user) method from duplicating records? Is there a way to ensure that firebase records remain unique?

Whenever I press the button, the post request is successfully sent, and the console.log function is working perfectly within the app.post function. However, the res.send() method does not

Display input checkboxes using ng-repeat based on dynamically changing conditions

The smart table's search feature seems to be malfunctioning with the table data

How to fetch React route parameters on the server-side aspect

Tips for accessing and modifying local JSON data in a Chrome Extension

Experiencing difficulties with the app.post function is leading to the error message saying "Cannot

Troubleshooting Vue.js 2 Routing Issues: Difficulty Accessing Posts Variable

Guide to assigning unique identifiers to all elements within an array using JavaScript

Steps for adding a div after a specified number

How can I implement a unique click handler for each individual owl carousel instance to refresh them

Exploring the process of adding arrays to highcharts using jQuery

Is there a way to access data from a different cart template containing personalized values on Shopify?

Performing array multiplication in Java without the use of a for loop

Incorporating User Input: Adding Paragraph Elements with HTML and Javascript to a Div Container