Strategies for sorting through arrays of objects containing nested objects with defined properties?

Question

Strategies for sorting through arrays of objects containing nested objects with defined properties?

I'm facing an issue while filtering a Javascript array of objects with nested objects based on specific properties. I can successfully filter by name, slug, website, and launch year without any problem. However, when it comes to filtering the category name (category.name) which is inside the object, it doesn't seem to work. Why does the filter for category name fail?

            var search = "qui"; // doesn't work (category.name)
            // var search = "Sauer"; // works (name)

            var data = [{ "name": "Sauer-Metz", "slug": "ab-laborum", 
              "website": "https://test.com", "launch_year": 2017,  "category_id": 6,
              "category": { "id": 6, "name": "qui", "slug": "qui" } } ];

            var results = data.filter(company => [
                'name', 'launch_year', 'website', 'category.name'
            ].some(key => String(company[key]).toLowerCase().includes(search.toLowerCase())));

            console.log(results);

javascript arrays object filter filtering

Answer 1

Answer №1

To tackle this issue, one effective approach is to utilize a value extractor similar to the function getKey shown below:

const getKey = (value, key) => {
    return key.split('.').reduce((acc, curr) => value[curr], '');
}

var filteredResults = data.filter(company => [
        'name', 'launch_year', 'website', 'category.name'
    ].some(key => String(getKey(company, key)).toLowerCase().includes(search.toLowerCase())));

Answer 2

To tackle this issue, one effective approach is to utilize a value extractor similar to the function getKey shown below:

const getKey = (value, key) => {
    return key.split('.').reduce((acc, curr) => value[curr], '');
}

var filteredResults = data.filter(company => [
        'name', 'launch_year', 'website', 'category.name'
    ].some(key => String(getKey(company, key)).toLowerCase().includes(search.toLowerCase())));

Answer 3

Answer №2

In my opinion, in order to address this specific nested property, it seems necessary to create a separate condition. Although I am currently unable to identify a more efficient approach:

let filteredResults = data.filter(
  (company) =>
    ["name", "launch_year", "website"].some((key) =>
      String(company[key]).toLowerCase().includes(search.toLowerCase())
    ) ||
    String(company["category"]["name"])
      .toLowerCase()
      .includes(search.toLowerCase())
);

Answer 4

In my opinion, in order to address this specific nested property, it seems necessary to create a separate condition. Although I am currently unable to identify a more efficient approach:

let filteredResults = data.filter(
  (company) =>
    ["name", "launch_year", "website"].some((key) =>
      String(company[key]).toLowerCase().includes(search.toLowerCase())
    ) ||
    String(company["category"]["name"])
      .toLowerCase()
      .includes(search.toLowerCase())
);

Answer 5

Answer №3

The dot notation operates differently than expected.

const testCase1 = 'apple';
const testCase2 = 'banana';

const info = [
    {
        name: 'Banana Split',
        description: 'A tasty treat',
        price: 5.99,
        category_id: 3,
        category: { id: 3, type: 'fruit', color: 'yellow' },
    },
];

const searchItems = (data, word) => {
    return data.filter((item) => {
        return (
            item?.category?.type.toLowerCase().includes(word.toLowerCase()) ||
            ['name', 'price', 'description'].some((key) => `${item[key]}`.toLowerCase().includes(word.toLowerCase()))
        );
    });
};

console.log('**SCENARIO A**')
console.log(searchItems(info, testCase1));
console.log('**SCENARIO B**')
console.log(searchItems(info, testCase2));

Answer 6

The dot notation operates differently than expected.

const testCase1 = 'apple';
const testCase2 = 'banana';

const info = [
    {
        name: 'Banana Split',
        description: 'A tasty treat',
        price: 5.99,
        category_id: 3,
        category: { id: 3, type: 'fruit', color: 'yellow' },
    },
];

const searchItems = (data, word) => {
    return data.filter((item) => {
        return (
            item?.category?.type.toLowerCase().includes(word.toLowerCase()) ||
            ['name', 'price', 'description'].some((key) => `${item[key]}`.toLowerCase().includes(word.toLowerCase()))
        );
    });
};

console.log('**SCENARIO A**')
console.log(searchItems(info, testCase1));
console.log('**SCENARIO B**')
console.log(searchItems(info, testCase2));

Answer 7

Answer №4

If you want to implement your method, you can change 'category.name' into ['category','name'], and then utilize

String(company[key[0]][key[1]])...

whenever the key is an array.

const search = "qui"; // does not work (category.name)
//const search = "Sauer"; // works (name)

const data = [{ "name": "Sauer-Metz", "slug": "ab-laborum",  "website": "https://test.com", "launch_year": 2017,  "category_id": 6, "category": { "id": 6, "name": "qui", "slug": "qui" } } ];

const results = data.filter(
    company => [
        'name', 'launch_year', 'website', ['category','name']
    ].some(
        key => 
        Array.isArray(key) ?
        String(company[key[0]][key[1]]).toLowerCase().includes(search.toLowerCase()) : 
        String(company[key]).toLowerCase().includes(search.toLowerCase())
    )
);

console.log(results);

Answer 8

If you want to implement your method, you can change 'category.name' into ['category','name'], and then utilize

String(company[key[0]][key[1]])...

whenever the key is an array.

const search = "qui"; // does not work (category.name)
//const search = "Sauer"; // works (name)

const data = [{ "name": "Sauer-Metz", "slug": "ab-laborum",  "website": "https://test.com", "launch_year": 2017,  "category_id": 6, "category": { "id": 6, "name": "qui", "slug": "qui" } } ];

const results = data.filter(
    company => [
        'name', 'launch_year', 'website', ['category','name']
    ].some(
        key => 
        Array.isArray(key) ?
        String(company[key[0]][key[1]]).toLowerCase().includes(search.toLowerCase()) : 
        String(company[key]).toLowerCase().includes(search.toLowerCase())
    )
);

console.log(results);

Strategies for sorting through arrays of objects containing nested objects with defined properties?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The value on the input of a custom Vue component does not update as expected when using v

Visualizing JSON data on D3.js graph axis

Check if an array includes a specific value, and then either update it if found, or create it

Trouble with Firebase import despite successful installation

Utilize try-catch or async-await within useEffect when testing with Jest

Ensuring the server application is up and running before initiating the mocha tests

Sending selected value from Mat-Select to header during API Call: A step-by-step guide

The next() function is malfunctioning in Express 4, resulting in the following error message: "Error [ERR_HTTP_HEADERS_SENT]: Headers cannot be set after they have

Like button for Facebook located at the bottom of a static webpage

Listening for events from an iframe can be achieved using a jQuery event listener on the parent element. However, transitioning to using

Changing a class on an element when clicked using Angular.js

Creating a square shape using JavaScript

Scattering a 3D array in MPI to form tetragonal prisms

Hovering over an image and trying to rotate it results in

Is there a more efficient method for storing JSON values as an Array in my code?

The constructor error in ng-serve signalizes an issue in

The program encountered an issue with accessing the 'ref' property, as it was not defined

Node child_process causing stdout buffering problems

What makes it feasible to modify characters in a character array, but not in a char pointer?

Executing multiple Ajax requests on CodeIgniter 3 from two separate pages