Implementing dynamic data filtering in Vue.js is a valuable feature that

I'm working on a Vuejs project where I need to filter out only the questions with reviewed:true and get the count of them. However, I'm encountering an error while using the code below: 

TypeError: question.reviewed.includes is not a function
. Can someone suggest a better approach to achieving this?

Check out the JSON file screenshot here: JSON File

 filterReviewed() {
      return this.questions.filter((question) => {
        return (
           question.reviewed.includes('true')
        );
      });
    },

javascriptvue.js

Answer №1

includes is a built-in method specific to objects of type Array. It is safe to directly assess the reviewed attribute.

filterReviewed (){
  return this.questions.filter((question) => question.reviewed);
}

Answer №2

If you want to sort through the reviews, use the following method:

sortReviews() {
          return this.reviews.filter((review) => review.checked === true);
        },

To find out the amount of reviews that have been sorted, use this:

sortReviews.reviews.length

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

Tips for utilizing the selected option in the name attribute with Javascript or jQuery

I am looking to use the "selected" attribute in the option element based on the name attribute using JavaScript or jQuery. Essentially, I want the option with name="1" to be automatically selected when the page loads. I have attempted the following code, b ...

javascriptjquery

Show a random number within a Bootstrap tooltip

I am trying to make a bootstrap popover display a random number every time it is clicked, but my current implementation is only showing the initial number generated and does not update on subsequent clicks. Below is my code snippet: <button type=&qu ...

javascripthtmlbootstrap-5popover

Transmit information from Ajax to CodeIgniter's controller

Right now, I am facing an issue with sending data from my JavaScript to a function in the controller using AJAX. Despite my best efforts, AJAX is not sending the data. Below, you can find the code that I have been working on: The JavaScript Function var ...

javascriptphpajaxcodeigniter

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

javascriptjqueryhtml

Clicking a link will trigger a page refresh and the loading of a new div

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> $(window).load(function () { var divs = $( #add_new, #details"); $("li a").click(function () { ...

javascriptphpjqueryhtmlajax

Delivering objects from controller in AngularJS

I'm currently working on a project where I need to retrieve objects from the controller. Here's a snippet of my code: score.component.js: angular.module('score').component('score',{ templateUrl : 'app/score/score.t ...

javascriptangularjs

Changing Underscores in ES6 Techniques

My current project is built using AngularJS, Redux, and Underscore. Within this project, I have the following code snippet: const selectedBroker = _.findWhere(state.brokers, { brokerId: action.payload }); return state.merge({ selectedBroker, sel ...

javascriptangularjsecmascript-6reduxunderscore.js

Error: Unable to access the 'width' property of an undefined value - Nuxt JS and Canvas

I am new to using Vue JS and trying to run a sketch on the canvas element in Nuxt JS, but encountering some issues. While there are no errors in VS Code, there is an error showing up in the browser console: client.js?06a0:84 TypeError: Cannot read propert ...

vue.jscanvasnuxt.js

implement a click event handler for GLmol (webGL)

Check out GLmol, a Molecular Viewer built on WebGL and Javascript by visiting You can see a demo of GLmol in action at I am interested in adding a click function to GLmol. For example, when I click on a ball, I would like to retrieve information about it ...

javascriptjqueryhtmlthree.jswebgl

Changing the Javascript Date Object into JSON date format

I'm in the process of converting a timestamp generated by var now = new Date().getTime(); which results in the timestamp 1349916512100. I am looking to format the date as \/Date(1349916512100)\/ in order to incorporate it into a JSON st ...

javascriptjsondate

Exporting two functions in JavaScript

Currently utilizing React, Redux, and experimenting with Material-UI integration. The example codes provided by Redux and Material-UI libraries include an 'export' statement at the end. Redux: export default connect(mapStateToProps, actions)(my ...

javascriptexportreact-reduxmaterial-ui

Accessing a service instance within the $rootScope.$on function in Angular

I'm looking for a way to access the service instance variable inside the $rootScope in the following code. myapp.service('myservice',function($rootScope) { this.var = false; $rootScope.$on('channel',function(e,msg) { v ...

javascripthtmlangularjs

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

javascriptphphtmlajax

List of random points generated using Three.js

Novice inquiry: I have generated some random points in JavaScript. How can I individually access each point later on? I remember something about an 'Object' that holds all the points, allowing me to manipulate their positions or selectively retri ...

javascriptthree.js

Ionic: setInterval/setTimer not functioning after 5 minutes in the background

In need of a timer that can send notifications via the OneSignal API after a user-defined time period is reached. Users can set the timer for any value between 1-59 minutes. Despite attempts to use the background mode plugin, specifically setInterval and s ...

javascriptandroidcordovatimerionic4

Connect a parent node to a specific subset within Mermaid's graph structure

Managing a complex Mermaid diagram that includes numerous subgraphs can be challenging. The size of the diagram often makes it difficult to maintain the correct order of subgraphs, leading to occasional rearrangements for clarity and positioning. However, ...

javascriptmermaiddiagramming

When incorporating babel-plugin-styled-components, Nextjs may encounter a mismatch error with classnames

After transferring the content of _document.js from the following styled components example and implementing the babel plugin mentioned in the styled components documentation, I am still encountering an error. _document.js import Document from 'next/ ...

javascriptreactjsnext.jsserver-side-renderingstyled-components

Breaking up a string using regex with various conditions

(Javascript old version of Node.js) Update: I need to clarify my request. I have a variety of instances like these var name1; CONST name2 Let nam; leT nam VAr n1 ; What I want as output is name1 name2 nam nam n1 Therefore, I am ex ...

javascriptnode.jsregexsplit

A beginner's guide to integrating ChartJS with React

Trying to incorporate ChartJS into a React component but unsure of how to proceed. First step is to create a canvas element following the instructions found at https://www.chartjs.org/docs/latest/getting-started/usage.html#creating-a-chart. Next, need to ...

javascriptreactjstypescript

Tips for including multiple directives in a component

Apologies in advance for my lack of clarity in expressing this question, which is why I am seeking assistance rather than finding the solution on my own. My query pertains to loading a component within another one and specifying it in the directive. Below ...

javascripttypescriptangularplunker