Filtering the array of objects in the Vuex state resulted in an empty array being

Question

Filtering the array of objects in the Vuex state resulted in an empty array being

I am working with a state that fetches data from

https://jsonplaceholder.typicode.com/todos/

. My goal is to filter this data based on the status completed:true or completed:false.

Below is the method I am using to filter the array:

filterByStatus(status) {
  const filteredResults = this.allTodos.filter(todo => todo.completed == status)
  console.log(filteredResults)
}

When I pass true or false as a parameter to the method, console.log(filteredResults) is returning an empty array.

filterByStatus(status) {
  let filteredResults = [];
  this.allTodos.map(item => {
    if (item.completed == status) {
      filteredResults.push(item);
    }
  });
  console.log(filteredResults);
}

I also attempted to use the map method, but the result remains an empty array.

When I console.log(this.allTodos), the result is:

 [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]

Could this be due to the Observer?

javascript vue.js vuejs2 vuex

Answer 1

Answer №1

It is advisable not to use map in this scenario:

        this.allTodos.map(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

Instead, consider using forEach:

        this.allTodos.forEach(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

Answer 2

It is advisable not to use map in this scenario:

        this.allTodos.map(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

Instead, consider using forEach:

        this.allTodos.forEach(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

Filtering the array of objects in the Vuex state resulted in an empty array being

Answer №1

Similar questions

Exploring elements with Watir WebDriver and ExtJS

Using node-native to authenticate in MongoDB is a surefire way to ensure the

Pause for a moment before commencing a fresh loop in the FOR loop in JavaScript

Access another key within an object

I am looking for a way to write a function that will emit an event to the parent component when an icon is

Opening the identical document

The ajax function is malfunctioning when called from an external JavaScript file

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

Google Scripts: Generating a set of data to include in an email

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

Is it normal for Tailwind animation to loop twice when transitioning between pages in Next.js?

Issue with exporting VueJS-generated HTML containing checkboxes results in loss of checkbox checked state

What is causing my basic angularjs to not function properly?

Deriving variable function parameters as object or tuple type in TypeScript

Selenium htmlUnit with dynamic content failing to render properly

Contrasting actions observed when employing drag functionality with arrays of numbers versus arrays of objects

The RangeError occurs when attempting to deploy to Heroku due to exceeding the maximum call stack size at Array.map in an anonymous function

What is the best way to create a dynamic data structure using an array?

Three fixed position divs arranged horizontally side by side

Searching for specific items within an array of objects using Mongoose