Extracting Data from Nested Array using VUEX Getter

I am facing an issue with a getter in VUEX where I am attempting to filter an array nested inside another array. However, I keep receiving a warning about modifying the state within the getter.

Error: [vuex] do not mutate vuex store state outside mutation handlers

I have tried filtering the top-level array but it doesn't work for the nested people array. The only workaround that seems to make it work is by using the following code snippet (even though it's incorrect)

for (const company of company.companies) {
      const filteredPeople: IPerson[] = company.people.filter(
        x => x.jobId === 1
      );
      company.people = filteredPeople;
    }

Answer №1

Simply put, it is not advisable to change the state within getters because this can lead to infinite loops. Getters are designed to retrieve data from the state without modifying it externally. Instead of altering the state directly, you can use the following code to return translated versions of companies with filtered people:

return company.companies.map(c => ({...c, people: c.people.filter(p => p.jobId === 1)}))

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

Learn how to display data from the console onto an HTML page using Angular 2

I am working on a page with 2 tabs. One tab is for displaying active messages and the other one is for closed messages. If the data active value is true, the active messages section in HTML should be populated accordingly. If the data active is false, th ...

Defining and initializing variables in TypeScript

Trying to get the hang of Angular and TypeScript, but I'm stuck on why I can't access my variable after declaring it. It looks something like this. export class aComponent implements OnInit { num : Number; num = currentUser.Id Encounterin ...

Utilizing jQuery (or another library) to Edit Images

I am on the hunt for a solution, whether it be a plugin, library, or unique JavaScript function, that will allow me to transform images to give the illusion that they are wrapping around a roll of paper. To help visualize, picture a paper towel roll uprig ...

Ensure that you wait for all asynchronous $http requests to finish in AngularJS before continuing

I am facing a challenge with a page that generates a varying number of $http requests based on the length of a certain variable. I aim to update the scope with the data only after all requests have been completed. Without relying on jQuery for this project ...

What is the best way to conceal panels while a bootstrap is being utilized?

I have been working on a bootstrap panel that consists of three panels: Panel 1, Panel 2, and Panel 3. The functionality of this panel is working correctly under normal circumstances. My Approach: Clicking on Panel 1 should display its content while hid ...

Is it possible to invoke functions using href in vue.js?

Upon running this source code, I encountered the following error: [Kakao is not defined] https://i.sstatic.net/UA7VI.png The structure of my sources is as follows: in 『nuxt.config.js』 export default { // Global page headers (https://go.nuxtjs.dev/ ...

Using the setTimeout function in Vue.js to trigger the play of an audio file at a specified

I have set up a Vue-audio player in my Vue.js application using the AudioPlayer component. This is my code: <template> <vue-audio id = "myAudio" :file= "file1"/> </template> <script> import VueAudio from 'vue-audio'; ...

What could be the reason I am unable to choose data properties from the dropdown options?

There are two different dropdowns for clothing types and colors. When a type of clothing is selected from the first dropdown, JSON data will fill the second dropdown with options based on the first dropdown selection. After selecting an option from the se ...

The process of how React attaches event listeners to elements created through the map method

Upon clicking discountKeyboard, an error was encountered: Alert: Functions cannot be used as a React child. This issue may arise if you return a Component instead of from render. Alternatively, it could be due to calling the function rather than returnin ...

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

My main objective is to create a unique container component with a dynamic list of customized card components that can be accessed individually (instead of as a group using ng-content). <custom-card-holder> <custom-card></custom-card> ...

broadcast updated $rootScope

How do I update the $rootScope.$broadcast with a new value? Let's take a look at this code snippet: var test = "fisk"; if(angular.element(this).hasClass('monster')) { var monster_info = angular.element(this).find("img").attr("title"); ...

implementing custom data fetching with TypeScript using generics is the way to go

Having a useFetch function that requires a URL argument of type string to consume an API, I encountered an issue where the result is not being recognized. The useFetch function uses generic types, and everything runs smoothly when using the types defined i ...

Unable to position divs next to each other in Firefox, yet successfully achieved in Chrome

I have successfully placed two divs side by side using the following markup, as shown in image 1, but this layout only works on Chrome. However, Firefox renders it differently as seen in Image 2. Is this a known issue that I overlooked? How can I resolve t ...

Stop Google Charts from magnifying the view

I'm currently working on creating a column chart using Google Charts. The purpose of this chart is to display the number of pageviews for a specific page within the last 30 days. Below is the JavaScript code I used to create the chart (you can access ...

Error thrown: Openerp 7.0 fails to read the prototype property of null due to a TypeError

Using Openerp (Version 7.0-20140429-231256) has been smooth sailing until I encountered a sudden error one day that left me stumped. Despite my efforts, I couldn't find any solutions to resolve this exception. OpenERP Client Error Uncaught TypeError: ...

The issue of WordPress failing to correctly resolve logout URLs within menu items

UPDATE: Adding the code below: alert(LogoutURL); reveals that the URL is not correctly passed to the JS variable. It appears to be encoded when transferred to the JS var. I confirmed this by executing the following in my PHP: <?php echo wp_logout_ur ...

The React application is showing an empty page without any visible errors during the compilation process

I'm having trouble with my React app - it compiles without errors but only shows a blank page. Can someone help me figure out what's wrong with my code? I'm new to React and could use some guidance. index.js import React from 'react&ap ...

Having trouble accessing a DOM element within a Vue component while using vanilla JavaScript

I am attempting to dynamically update data from a Vue component using jQuery in a Webpack project. Below is the code snippet: <template> <div id="container"> <slot>show string!!</slot> <div id="s_container"&g ...

Having an issue with Vue-loader where it's throwing an error for an unexpected

After executing the webpack command, I encounter an unusual error within the vue-loader library. ERROR in ...\node_modules\vue-loader\lib\parser.js:25 output.styles.forEach(style => { ^^ Unexp ...

Ways to include ".com" content statically in HTML on a website with a .org domain

I need to modify the content of a webpage in HTML. Example 1: Whenever I change the domain name to end with .com, the URL within my content automatically updates to www.example.com. Here is an example: dotCOM Example 2: Similarly, if the domain name en ...