Searching and updating values within a nested array of objects: A comprehensive guide

I need to search for a value within a nested array of objects and update it. Specifically, in the given array, I want to locate the OptionCode based on a String and mark the corresponding option as blocked. The search strings are stored in an array.

Initial Array:

filters: [
    {
        FilterCode: "TourPrice",
        FilterName: "Tour Price",
        FilterIcon: show_Dollar,
        Options: [
            {
                Name: "Free",
                OptionCode: "Free",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: ["LowestPrice"],
            },
            {
                Name: "Paid",
                OptionCode: "Paid",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Free and Paid",
                OptionCode: "FreeAndPaid",
                active: true,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
        ],
    },
    {
        FilterCode: "SortedBy",
        FilterName: "Sorted By",
        FilterIcon: show_Sort,
        Options: [
            {
                Name: "Most Relevant",
                OptionCode: "MostRelevant",
                active: true,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Latest Tour",
                OptionCode: "LatestTour",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Oldest Tour",
                OptionCode: "OldestTour",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Lowest Price",
                OptionCode: "LowestPrice",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: ["Free", "FreeAndPaid'],
            },
        ],
    },
],

For the input search 

["Free", "FreeAndPaid"]
, the resulting array should be as follows.

Intended Result Array

filters: [
    {
        FilterCode: "TourPrice",
        FilterName: "Tour Price",
        FilterIcon: show_Dollar,
        Options: [
            {
                Name: "Free",
                OptionCode: "Free", // Find OptionCode
                active: false,
                blocked: true, // set blocked to true
                forbiddenFilterOptionCode: ["LowestPrice"],
            },
            {
                Name: "Paid",
                OptionCode: "Paid",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Free and Paid",
                OptionCode: "FreeAndPaid", // Find OptionCode
                active: true,
                blocked: true, // set blocked to true
                forbiddenFilterOptionCode: [],
            },
        ],
    },
    {
        FilterCode: "SortedBy",
        FilterName: "Sorted By",
        FilterIcon: show_Sort,
        Options: [
            {
                Name: "Most Relevant",
                OptionCode: "MostRelevant",
                active: true,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Latest Tour",
                OptionCode: "LatestTour",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Oldest Tour",
                OptionCode: "OldestTour",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode: [],
            },
            {
                Name: "Lowest Price",
                OptionCode: "LowestPrice",
                active: false,
                blocked: false,
                forbiddenFilterOptionCode:  ["Free", "FreeAndPaid"],
            },
        ],
    },
],
javascriptarrays

Answer №1

If you are unsure of the object to which the filters variable belongs based on your question, you can utilize the function below.

This solution involves looping through the array, then iterating over the option objects within each filter, and finally checking if the OptionCode value matches any of the specified target values.

The structure of the filters is directly modified as the function runs:

function setBlocked(filters, target) {
    for (let filter of filters) {
        for (let option of filter.Options) {
            if (target.includes(option.OptionCode)) {
                option.blocked = true;
            }
        }
    }
}

// Array of filters with their respective options
let filters = [
  { FilterCode: "TourPrice", ... }, 
  { FilterCode: "SortedBy", ... }
];

setBlocked(filters, ["Free", "FreeAndPaid"]);

console.log(filters);

Answer №2

const filters = [
  {
    FilterCode: "TourPrice",
    FilterName: "Tour Price",
    FilterIcon: null,
    Options: [
      {
        Name: "Free",
        OptionCode: "Free",
        active: false,
        blocked: false,
        forbiddenFilterOptionCode: ["LowestPrice"],
      },
      {
        Name: "Paid",
        OptionCode: "Paid",
        active: false,
        blocked: false,
        forbiddenFilterOptionCode: [],
      },
      {
        Name: "Free and Paid",
        OptionCode: "FreeAndPaid",
        active: true,
        blocked: false,
        forbiddenFilterOptionCode: [],
      },
    ],
  },
  {
    FilterCode: "SortedBy",
    FilterName: "Sorted By",
    FilterIcon: null,
    Options: [
      {
        Name: "Most Relevant",
        OptionCode: "MostRelevant",
        active: true,
        blocked: false,
        forbiddenFilterOptionCode: [],
      },
      {
        Name: "Latest Tour",
        OptionCode: "LatestTour",
        active: false,
        blocked: false,
        forbiddenFilterOptionCode: [],
      },
      {
        Name: "Oldest Tour",
        OptionCode: "OldestTour",
        active: false,
        blocked: false,
        forbiddenFilterOptionCode: [],
      },
      {
        Name: "Lowest Price",
        OptionCode: "LowestPrice",
        active: false,
        blocked: false,
        forbiddenFilterOptionCode: ["Free", "FreeAndPaid"],
      },
    ],
  },
];
optionsToSearch = ["Free", "FreeAndPaid"];
const updatedFilters = filters.map((filter) => {
  const options = filter.Options.map((option) => {
    if (optionsToSearch.includes(option.OptionCode)) {
      return { ...option, blocked: true };
    } else {
      return option;
    }
  });
  return { ...filter, Options: options };
});

console.log(updatedFilters);

Answer №3

If you are looking to create a fresh array of objects, the .map() method can be utilized on your existing filters array. This approach involves mapping each object to a new one that retains all the original properties (achieved through the spread syntax ...), while updating the Options key with a freshly mapped array. The technique here is to construct a new object by extracting properties and values from each option object using the spread syntax, and then adjusting the blocked property based on whether the search array includes the OptionCode from the current option object:

const filters = [{ FilterCode: "TourPrice", FilterName: "Tour Price", FilterIcon: 'show_Dollar', Options: [{ Name: "Free", OptionCode: "Free", active: false, blocked: false, forbiddenFilterOptionCode: ["LowestPrice"], }, { Name: "Paid", OptionCode: "Paid", active: false, blocked: false, forbiddenFilterOptionCode: [], }, { Name: "Free and Paid", OptionCode: "FreeAndPaid", active: true, blocked: false, forbiddenFilterOptionCode: [], }, ], }, { FilterCode: "SortedBy", FilterName: "Sorted By", FilterIcon: "show_Sort", Options: [{ Name: "Most Relevant", OptionCode: "MostRelevant", active: true, blocked: false, forbiddenFilterOptionCode: [], }, { Name: "Latest Tour", OptionCode: "LatestTour", active: false, blocked: false, forbiddenFilterOptionCode: [], }, { Name: "Oldest Tour", OptionCode: "OldestTour", active: false, blocked: false, forbiddenFilterOptionCode: [], }, { Name: "Lowest Price", OptionCode: "LowestPrice", active: false, blocked: false, forbiddenFilterOptionCode: ["Free", "FreeAndPaid"], }, ], } ];

const search = ["Free", "FreeAndPaid"];
const result = filters.map(obj => ({
  ...obj,
  Options: obj.Options.map(option => ({
    ...option,
    blocked: search.includes(option.OptionCode)
  }))
}));
console.log(result);

Answer №4

To achieve this, you can iterate through the Options within the filters array and then compare the search terms using the includes method:

const searchTerms = ['Free'];
const updatedFilters = filters.map(filter => {
  return {
    ...filter,
    Options: filter.Options.map(option => {
      if (searchTerms.includes(option.Name)) {
        return {
          ...option,
          blocked: true
        }
      }
      return option;
    })
  }
})

Answer №5

function findIndexForPropertyValue(value, list) {
    return list
        .reduce((acc, curr, index) =>  [...acc, [index, curr.Options.findIndex(option => option.OptionCode === value)]], [])
        .find(result => result[1] >= 0)
};

const targetIndex = findIndexForPropertyValue('Free', filters);
filters[targetIndex[0]].Options[targetIndex[1]].OptionCode = 'NewValue'

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

What is the significance of a[0] in a multidimensional array?

Just recently, I began delving into the intricacies of C language with a book and found myself getting a bit tangled up in the section that explains pointers and arrays. In the scenario where there is a two-dimensional array (let's narrow it down for ...

carraysmultidimensional-array

Having trouble with yarn install? Keep receiving the error message "Other managers are not allowed"?

Recently, I began using the yarn package manager for one of my projects. To get started, I globally installed yarn using sudo npm install yarn -g. However, when attempting to install dependencies with yarn install, I encountered the following message on t ...

javascriptnpmcommand-line-interfaceyarnpkg

Is it possible to utilize EmberJS or other frameworks without the necessity of setting up its server?

I am in search of a JavaScript framework that offers the following features: MV* Well-structured HTML file as template Fast rendering (possibly using virtual DOM) Ability to combine and be compatible with other plugins or libraries Edit on tablet IDE app ...

javascriptember.jsframeworksclient-sideweb-frontend

Adding several <div> elements with the correct indices

I need help with a dynamic form that requires users to select a state before revealing the corresponding cities within that state. <form method="post"> <div class="summary"> <div class="trip"> <select name="State" class="s ...

javascriptjqueryhtml

Troubleshooting: Issue with passing parameters in Wordpress ajax function

In my Wordpress Ajax implementation, I am facing an issue where the parameter value metakey: id is not being passed to $_POST["metakey"]. As a result, when I do a var_dump($_POST), it shows array(0) { }. If I manually set a static value for the variable i ...

javascriptphpjqueryajaxwordpress

Display unique values in the array once, and display all other values

Is it possible to display only one value in a foreach loop for an array that has multiple identical values? I want to avoid grouping the array in the query like this: 0 => array (size=10) 'id' => string '1' (length=1) ...

phparraysforeachfilter-var

Recording Audio Using ReactJS

I am exploring ways to record audio using ReactJS and save it on my Node server. Initially, I attempted to utilize the "react-audio-recorder" module but encountered issues when attempting to record multiple audios consecutively. Additionally, I experiment ...

javascriptnode.jsreactjsaudio-recording

"Email verification is always set to true for users signing in through Firebase

Currently, I am working on integrating a sign-in form using Firebase web and Vue.js. The issue I'm facing is that I need to send a verification email to confirm the user's email address, but the emailVerified key is always set to true by default ...

javascriptfirebasevue.jsfirebase-authentication

Error: JSON encountered circular structure when attempting to serialize an object of type 'ClientRequest' with a property 'socket' that references an object of type 'Socket'

Encountering an error while attempting to make a POST request to my TypeORM API using axios: TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -&g ...

javascriptnode.jstypescripttypeorm

Validating date inputs with ng-change in AngularJS

I am currently utilizing AngularJS along with AngularJS bootstrap within my webpage. One of the components I have is a date picker directive that is structured like this: <div class="form-group {{dateStatus.class}}"> <p class="input-g ...

javascriptangularjsdatepickerangular-ui-bootstrapangularjs-ng-change

Retrieve the unique array key for each individual result

I am trying to display the array key for each result from my search engine on the page. Here is the code I have so far: $results = search($keywords); $results_num = count($results); if (!empty($errors)){ foreach ($results as $result){ echo "T ...

phpmysqlarraysfor-loopforeach

JavaScript array field for space exploration

I am looking to create a 3x3 grid using JavaScript for a web application. Each field should start with a value of false. However, my code doesn't seem to be functioning correctly and I'm having trouble locating the error. The objective is to ensu ...

javascriptarraysmultidimensional-array

Tips for redirecting to a 404 page when encountering invalid data in getStaticProps

For my Next.js application, I need to retrieve all articles written by a specific author. The author's ID is obtained from the request parameters. I have already pre-generated some authors using getStaticPaths. Within the getStaticPaths function, I h ...

javascriptreactjsnext.js

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

The rows in the React table are refusing to change color despite the styles being applied; instead, they are coming back

Hey there, Green Dev here! I've been working on a React table where I'm trying to conditionally change the row color. The styles are being passed in, but for some reason they return as undefined. Strangely enough, when I remove my logic and simpl ...

javascriptnode.jsreactjsjavascript-objects

The changes to the position are being reflected in the debug console, yet my DOM remains stagnant

I'm currently working on developing a JavaScript clicker game, but I've encountered an issue with the gem animations. Despite debugging and confirming that the position is updating, the gems do not visually fall down after being clicked. Below is ...

javascripthtml

issue with accessing property in vue 2 simple examination

Hey there! I'm currently working on implementing Vue in a Laravel application, but I've run into some challenges. Essentially, my goal is to retrieve data from a GET request and generate results based on that data. However, I'm struggling to ...

javascriptlaravelvue.jsvuejs2vue-component

Having trouble getting the Bootstrap modal form to submit when using Knockout's submit binding?

Check out my jsFiddle example by clicking here. I am currently working on a form within a bootstrap modal. The problem I'm facing is that the knockout submit binding doesn't get executed unless the user clicks on the submit input. It seems like ...

javascripttwitter-bootstrapmvvmknockout.js

Click Action on CanJS Table

I am currently developing a canJS application and have been able to successfully handle the click event for an HTML table using the code below. 'table td click':function(el,event){ console.log('clicked ',el.text()); } ...

javascriptcanjscanjs-control

The suspense fallback feature in next.js 14 seems to be malfunctioning and not displaying properly

I'm currently experimenting with using Suspense in my next.js application, but I am facing an issue where the fallback does not display even after implementing a hardcoded delay. It seems that the results always show up immediately, even on page refre ...

javascriptreactjsnext.js