Refining search results with dynamic filter conditions in TypeScript array objects and using search refiners in SharePoint

In my Typescript and SharePoint Search project, I am working on a scenario involving a Collection of Arrays structured as follows:

let _SelectedBusinessUnits =[
{ "fileName": "XYX.doc", "Region": "APAC", "Country":"Australia;China", "LOB": "Auto;Business Auto", SubLOB" : "Standard Auto" },
{ "fileName": "XYX2.doc", "Region": "UKIG", "Country":"UK;Germany", "LOB": "Wordings;Business Wordings", SubLOB" : "Super Wordings;YYY" },
{ "fileName": "XYX3.doc", "Region": "LTAM", "Country":"Japan", "LOB": "Endorsments;Business Endorsments", SubLOB" : "Super Endorsement" },
{ "fileName": "XYX4.doc", "Region": "APAC", "Country":"Australia:China", "LOB": "Auto;Business Auto", SubLOB" : "Standard Auto;XYHC" },
{ "fileName": "XY.doc", "Region": "UKIG", "Country":"UK, Germany", "LOB": "Wordings;Business Wordings", SubLOB" : "Super Wordings" },
{ "fileName": "XYX.pdf", "Region": "LTAM", "Country":"Japan", "LOB": "Endorsments;Business Endorsments", SubLOB" : "Super Endorsement" },
{ "fileName": "XYX.docx", "Region": "APAC", "Country":"Australia;China", "LOB": "Auto;Business Auto", SubLOB" : "Standard Auto" },
{ "fileName": "XYX.html", "Region": "UKIG", "Country":"UK;Germany", "LOB": "Wordings;Business Wordings", SubLOB" : "Super Wordings" },
{ "fileName": "X.pdf", "Region": "LTAM", "Country":"Japan", "LOB": "Endorsments;Business Endorsments", SubLOB" : "Super Endorsement" },]

I define filter conditions in another array of objects.

let filercondition =[{
{"Region": "UKIG"},
{"Region": "APAC"}
{"LOB":'Wordings},
{"Country":'UK'}

 ]]

The goal now is to filter items based on the values in the filter condition. This involves selecting Region, Sublob, Lob, etc., using respective multiselect dropdowns like Regions, country, lob, and sublobs.

After making selections in the multiselect dropdowns, I need to fetch results, similar to refiner filters in a search function.

javascripttypescript

Answer №1

To locate the object based on a filter condition, you can utilize array#filter along with array#some. For each object within the businessUnits array, search for matching words in your filtercondition array.

businessUnits.filter(o => {
   return filtercondition.some(obj => Object.keys(obj).some(k => o[k] === obj[k]));
});


let businessUnits = [{
      "fileName": "XYX.doc",
      "Region": "APAC",
      "Country": "Australia;China",
      "LOB": "Auto;Business Auto",
      "SubLOB": "Standard Auto"
    },
    {
      "fileName": "XYX2.doc",
      "Region": "UKIG",
      "Country": "UK;Germany",
      "LOB": "Wordings;Business Wordings",
      "SubLOB": "Super Wordings;YYY"
    },
    {
      "fileName": "XYX3.doc",
      "Region": "LTAM",
      "Country": "Japan",
      "LOB": "Endorsments;Business Endorsments",
      "SubLOB": "Super Endorsement"
    },
    {
      "fileName": "XYX4.doc",
      "Region": "APAC",
      "Country": "Australia:China",
      "LOB": "Auto;Business Auto",
      "SubLOB": "Standard Auto;XYHC"
    },
    {
      "fileName": "XY.doc",
      "Region": "UKIG",
      "Country": "UK, Germany",
      "LOB": "Wordings;Business Wordings",
      "SubLOB": "Super Wordings"
    },
    {
      "fileName": "XYX.pdf",
      "Region": "LTAM",
      "Country": "Japan",
      "LOB": "Endorsments;Business Endorsments",
      "SubLOB": "Super Endorsement"
    },
    {
      "fileName": "XYX.docx",
      "Region": "APAC",
      "Country": "Australia;China",
      "LOB": "Auto;Business Auto",
      "SubLOB": "Standard Auto"
    },
    {
      "fileName": "XYX.html",
      "Region": "UKIG",
      "Country": "UK;Germany",
      "LOB": "Wordings;Business Wordings",
      "SubLOB": "Super Wordings"
    },
    {
      "fileName": "X.pdf",
      "Region": "LTAM",
      "Country": "Japan",
      "LOB": "Endorsments;Business Endorsments",
      "SubLOB": "Super Endorsement"
    },
  ],
  filtercondition = [
    {
      "Region": "UKIG"
    },
    {
      "Region": "APAC"
    },
    {
      "LOB": "Wordings"
    },
    {
      "Country": "UK"
    },
  ],
  result = businessUnits.filter(o => {
    return filtercondition.some(obj => Object.keys(obj).some(k => o[k] === obj[k]));
  });

console.log(result);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

javascripthtmlcsstwitter-bootstrapdrop-down-menu

Unable to retrieve the state in a functional component using the useLocation hook from react-router-dom

I am facing an issue while trying to access a state property that I have passed through NavLink into a component. Despite using useLocation as recommended, I seem to be struggling with it due to some typescript error. Here is the code snippet: import Reac ...

reactjstypescriptreact-router

Automatically resizing images in a canvas when their resolution exceeds the canvas size in HTML5

I am currently using Html5, fabric.js, and JavaScript to upload multiple images to a canvas. However, there are instances where the uploaded image size exceeds that of the canvas. I am looking for a way to ensure that the image is set to a fixed size. v ...

javascriptcsshtmlcanvasfabricjs

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

I have encountered an issue with sorting the date column in my datatable. Here is a screenshot showcasing the problem. Below is the code I am using: <table id="tbl" class="table table-small-font table-bordered table-striped"> <thead> &l ...

javascriptjquerydatatables

Creating a Runescape Tracker: What essentials should I include?

Hello everyone, I am a beginner in the world of programming and I am excited to learn. I have heard that the best way to learn is by working on a project. I have always been interested in creating a Skill Tracker for my clan. Can you offer any advice on wh ...

javascriptphphtmlmysqlcss

Create a form with two submission buttons along with a captcha verification system

I'm currently developing a booking page form that requires a unique functionality. I need a single form where clients can enter their information, followed by two submit buttons at the bottom. The first button should hold their reservation for 72 hour ...

phpjavascriptformssubmitcaptcha

How can I switch the data source in JavaScript when a dropdown is clicked?

I have a webpage designed with HTML that features a dropdown menu and a div element intended to showcase a map: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.boot ...

javascripthtmlwcfamcharts

Issue with TypeScript: Declaring type for objects in an array using .map

I'm having trouble assigning types to the Item object that is being returned from unitedStates.map((item: Item) => {}. Despite my efforts, I am unable to correctly define the types. Although I have specified the unitedStates array of objects as un ...

reactjstypescriptreact-nativetypestypescript-typings

New input has been added: a checkbox element that is void of any value

I am facing an issue when trying to add a new input:checkbox. Even after adding a new input and checking it, I am unable to retrieve the value of the checked input:checkbox when clicking on the button. How can I fix this problem? DEMO: http://jsfiddle.net ...

javascriptjqueryhtmlarrays

Exploring the power of React Hooks with the useState() function and an array filled

When creating new "Todo" items and modifying the fields, everything works fine. However, my problem arises when trying to retrieve the child data after clicking the "show all objects" button. To better understand my issue, here is a code example: const Co ...

javascriptreactjs

JavaScript - task - collection of arrays

var x = new Array(); var y = new Array(); var z = [x,y]; var words = 'hello,world,nice,day'; for(var j = 0; j < z.length; j++){ z[j] = words.split(','); } Once executed, the desired outcome is: c = [x, y]; x = ['hello' ...

phpjavascriptasp.net.nethtml

When I upgraded my "react-router-dom" from version "5.2.0" to "6.14.0", I encountered a warning stating "No routes matched location"

After updating react-router-dom from version "5.2.0" to "6.14.0", I encountered a warning saying "No routes matched location." Initially, I received an error stating that "<Route> is only meant to be used as a child of <Routes>, not rendered d ...

javascriptreactjsmaterial-uireact-router-dom

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

javascriptjqueryhtmlcssjquery-select2

Incorporate personalized feedback into a datatable with server-side processing

Trying to implement server-side processing for a datatable loaded from an AJAX response using this specific example The server response being received is as follows: {"msg":null,"code":null,"status":null,"result":[{"aNumber":"3224193861","bNumber":"32159 ...

javascriptjqueryajaxdatatabledatatables

Stencil - React Integration Does Not Support Global CSS Styling

As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory. Upon attempting to incorporate my components int ...

javascriptcssreactjsstenciljsstencil-component

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Is this question a duplicate of [AJAX call in for loop won't return values to correct array positions? I am following the solution by Plynx. The issue I'm facing is that the closure fails to iterate through all elements in the loop, although the ...

javascriptjqueryajaxloopsclosures

Error encountered while attempting to build Ionic 5 using the --prod flag: The property 'translate' does not exist on the specified type

I encountered an error while building my Ionic 5 project with the --prod flag. The error message I received is as follows: Error: src/app/pages/edit-profile/edit-profile.page.html(8,142): Property 'translate' does not exist on type 'EditProf ...

javascriptangularionic-framework

Create and set up a dynamically added Xeditable form field

Is there a way to add a dynamic editable field within the thumbnail section of dropzone.js? I have discovered that Xeditable fields added dynamically need to be initialized. I am attempting to do this in Angular. Check out the Fiddle here: http://jsfiddle ...

javascriptangularjsx-editable

I'm thinking about transitioning my current React app to Next.js. Do you think it's a good move?

We have recently transitioned our project from react-redux with firebase authentication and solr DB to next.js. Below is the updated folder structure of our app: --src --actions --assets --components --controllers --firebase --redu ...

javascriptreactjsreact-reduxnext.js

Issue with moving files after successful upload - encountering ENOENT Error

I am encountering a frustrating issue while trying to transfer files from the temp directory to the profile_pictures directory. This seemingly straightforward task has proven to be quite challenging as I have been stuck on it for an hour! The process shou ...

javascriptnode.jsexpressfs