Discover optimized ways to search for and sort through deeply embedded objects

Question

Discover optimized ways to search for and sort through deeply embedded objects

In Vue3, I am working with the object $products, which looks like this:

[{ 
   "id": 1, 
   "item": "Product 1", 
   "productcategories": [{ 
      "id": 300, 
      "title": "Category300" 
   },
   { 
      "id": 301, 
      "title": "Category301" 
   }], 
},
{ 
   "id": 2, 
   "item": "Product 2", 
   "productcategories": [{ 
      "id": 200, 
      "title": "Category200" 
   }], 
},
{ 
   "id": 3, 
   "item": "Product 3", 
   "productcategories": [{ 
      "id": 301, 
      "title": "Category301" 
   },
   { 
      "id": 309, 
      "title": "Category309" 
   }], 
}]

It's important to note that each product can belong to multiple product categories.

My objective is to filter this object and retrieve a new object that includes only products with at least one product category id of 301. The resulting object, $filtered_products, should look like this:

[{ 
   "id": 1, 
   "department_id": 2, 
   "item": "Product 1", 
   "productcategories": [{ 
      "id": 300, 
      "title": "Category300" 
   },
   { 
      "id": **301**, 
      "title": "Category301" 
   }], 
},
{ 
   "id": 3, 
   "department_id": 2, 
   "item": "Product 1", 
   "productcategories": [{ 
      "id": **301**, 
      "title": "Category301" 
   },
   { 
      "id": 309, 
      "title": "Category309" 
   }], 
}]

I am looking for recommendations on how to optimize this search process for efficiency.

javascript vue.js performance sorting filter

Answer 1

Answer №1

If you are looking to perform a one-time search of the data, following the method outlined in @moonwave99's response is likely the most efficient approach.

However, if your requirement involves repeated queries on this data with different category IDs, it would be beneficial to invest upfront in creating a lookup object in the form of a map and utilizing that instead:

const productsByCategoryId =
  products
  .flatMap(p => p.productcategories.map(pc => [pc.id, p]))
  .reduce((map, [catId, product]) => {
    const arr = map.get(catId) ?? [];
    const newArr = [...arr, product];
    const deduped = [...new Set(newArr)];
    map.set(catId, deduped);
    return map;
  }, new Map);

console.log(productsByCategoryId.get(301));

const products = [{
    "id": 1,
    "item": "Product 1",
    "productcategories": [{
        "id": 300,
        "title": "Category300"
      },
      {
        "id": 301,
        "title": "Category301"
      }
    ],
  },
  {
    "id": 2,
    "item": "Product 2",
    "productcategories": [{
      "id": 200,
      "title": "Category200"
    }],
  },
  {
    "id": 3,
    "item": "Product 3",
    "productcategories": [{
        "id": 301,
        "title": "Category301"
      },
      {
        "id": 309,
        "title": "Category309"
      }
    ],
  }
];

const productsByCategoryId =
  products
  .flatMap(p => p.productcategories.map(pc => [pc.id, p]))
  .reduce((map, [catId, product]) => {
    const arr = map.get(catId) ?? [];
    const newArr = [...arr, product];
    const deduped = [...new Set(newArr)];
    map.set(catId, deduped);
    return map;
  }, new Map);

console.log(productsByCategoryId.get(301));

Answer 2

If you are looking to perform a one-time search of the data, following the method outlined in @moonwave99's response is likely the most efficient approach.

However, if your requirement involves repeated queries on this data with different category IDs, it would be beneficial to invest upfront in creating a lookup object in the form of a map and utilizing that instead:

const productsByCategoryId =
  products
  .flatMap(p => p.productcategories.map(pc => [pc.id, p]))
  .reduce((map, [catId, product]) => {
    const arr = map.get(catId) ?? [];
    const newArr = [...arr, product];
    const deduped = [...new Set(newArr)];
    map.set(catId, deduped);
    return map;
  }, new Map);

console.log(productsByCategoryId.get(301));

const products = [{
    "id": 1,
    "item": "Product 1",
    "productcategories": [{
        "id": 300,
        "title": "Category300"
      },
      {
        "id": 301,
        "title": "Category301"
      }
    ],
  },
  {
    "id": 2,
    "item": "Product 2",
    "productcategories": [{
      "id": 200,
      "title": "Category200"
    }],
  },
  {
    "id": 3,
    "item": "Product 3",
    "productcategories": [{
        "id": 301,
        "title": "Category301"
      },
      {
        "id": 309,
        "title": "Category309"
      }
    ],
  }
];

const productsByCategoryId =
  products
  .flatMap(p => p.productcategories.map(pc => [pc.id, p]))
  .reduce((map, [catId, product]) => {
    const arr = map.get(catId) ?? [];
    const newArr = [...arr, product];
    const deduped = [...new Set(newArr)];
    map.set(catId, deduped);
    return map;
  }, new Map);

console.log(productsByCategoryId.get(301));

Answer 3

Answer №2

Utilizing Array.prototype.some method:

function checkCategoryExistence(category) {
  return products.filter(
    ({ categories }) => 
      categories.some(({ id }) => id === category
    )
  );
}

Check out the results below:

const products = [{
    "id": 1,
    "name": "Product A",
    "categories": [{
        "id": 100,
        "title": "Category100"
      },
      {
        "id": 101,
        "title": "Category101"
      }
    ],
  },
  {
    "id": 2,
    "name": "Product B",
    "categories": [{
      "id": 200,
      "title": "Category200"
    }],
  },
  {
    "id": 3,
    "name": "Product C",
    "categories": [{
        "id": 101,
        "title": "Category101"
      },
      {
        "id": 109,
        "title": "Category109"
      }
    ],
  }
]

function checkCategoryExistence(category) {
  return products.filter(({ categories }) => categories.some(({ id }) => id === category))
}

const filteredProducts = checkCategoryExistence(101);

console.log(filteredProducts);

Answer 4

Utilizing Array.prototype.some method:

function checkCategoryExistence(category) {
  return products.filter(
    ({ categories }) => 
      categories.some(({ id }) => id === category
    )
  );
}

Check out the results below:

const products = [{
    "id": 1,
    "name": "Product A",
    "categories": [{
        "id": 100,
        "title": "Category100"
      },
      {
        "id": 101,
        "title": "Category101"
      }
    ],
  },
  {
    "id": 2,
    "name": "Product B",
    "categories": [{
      "id": 200,
      "title": "Category200"
    }],
  },
  {
    "id": 3,
    "name": "Product C",
    "categories": [{
        "id": 101,
        "title": "Category101"
      },
      {
        "id": 109,
        "title": "Category109"
      }
    ],
  }
]

function checkCategoryExistence(category) {
  return products.filter(({ categories }) => categories.some(({ id }) => id === category))
}

const filteredProducts = checkCategoryExistence(101);

console.log(filteredProducts);

Discover optimized ways to search for and sort through deeply embedded objects

Answer №1

Answer №2

Similar questions

Can you explain the process for moving a div to align with another div?

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

ng-class expressions are constantly evolving and adapting

Generate an array of responses within a child component and then send this array to the parent component using Vue.js 2

Unable to append item to JavaScript Map

Design with Internal Elements

transfer jquery element using jquery ajax

Leveraging a specialized Angular filter as a cellFilter within the columnDefs of ui-grid, set in an Angular constant

The Selenium driver's execute_script() function is not functioning as expected

What is the best way to modify .js source files while using AjaxControlToolkit?

How to eliminate spacing between photos in a flexbox layout

Angular is throwing an error because it cannot find the definition for

Preventing page re-rendering with redux when a condition is not met

What is the process for changing the preserveDrawingBuffer setting in three.js?

The component is missing either a render function or a template definition in pages/index.vue

Determine if a parsed JSON has the identical structure of a class in Node.js

What could be causing the React text input to constantly lose focus with every keystroke?

Create a default function within a mongoose field

When executing store.sync() in ExtJS, all fields are passed

JavaScript error in the Electron browser is causing a glitch