The process of filtering arrays and utilizing the V-for directive in Vue.js

Utilizing Vue.js, I am attempting to iterate through an array of levels. I successfully received the response json in actions with a forEach function like:

  let filters = []
            const array = response.data
            array.forEach((element) => {
               filters.push(element)
            })
        

After storing the data in state, is there a way to filter by TYPE and then iterate over the Data in order to render it in a select element or any other component using V-for in Vue.js?

This is my sample JSON file:

     [
  {
    'type': 'filter',
    'datatype': 'str',
    'data': [
      {
        'var_name': 'Gender',
        'options': [
          'Male',
          'Female'
        ]
      }
    ]
  },
    {
      'type': 'filter',
      'datatype': 'date',
      'data': [
        {
          'var_name': 'From',
          'options': []
        }
      ]
    },
    {
      'type': 'range',
      'datatype': 'date',
      'data': [
        {
          'var_name': 'From',
          'options': []
        },
        {
          'var_name': 'To',
          'options': []
        }
      ]
    }
  ]

Answer №1

<div v-for="item in items">... </div>
computed: {
    items() {
        return this.list.filter(obj => obj.category === 'item')
    }
}

Answer №2

To implement the functionality in a .vue file, follow these steps:

  1. Begin by saving the filters array to a data variable within the vue file.

    data() {
       return {
          filters: []
       }
    }
    
    const array = response.data;
    
    array.forEach((element) => {
       this.filters.push(element);
    })
    
  2. Next, utilize v-for in the html template as shown below.

    <template v-for="oneItem in filters.filter(item => {item.type == 'filter'})"> 
    </template>
    

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 best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

I am facing an issue with processing a JSON response: var jsondata = dojo.fromJson(response); There is also a string that I am working with: var jsonString = jsondata.items; The variable jsonString represents the JSON data in the file: jsonString="[ ...

There was an issue with deserializing NewtonSoft Json due to a problem converting a string to a decimal value: /Date(1490721584000-0500

I am working on an ASP.Net MVC project where I'm using the NewtonSoft json deserializer to consume a json web service that sends dates in the /Date()/ format. The json I am receiving looks like this (showing just the first array element): [ { " ...

Accessing an array in Scala Play Json using JsPath

import play.api.libs.json._ val jsonData: JsValue = Json.parse(""" { "name" : "Independence", "foundingFathers" : [ { "name" : { "first": "John", "last": "Adams" }, "country" : "United States" }, { "na ...

Storing and updating object property values dynamically within a for...in loop in JavaScript

I am currently working on a Node application powered by express and I am looking to properly handle apostrophes within the incoming request body properties. However, I am not entirely convinced that my current approach is the most efficient solution. expo ...

Extracting precise information from a JSON file using Angular's $http.get

I am struggling with extracting a specific user from a JSON file containing a user list and displaying it on an Angular index page. Despite extensive research, I have been unable to find a satisfactory solution. The user list must remain in a JSON file ins ...

once a value is assigned to the variable "NaN," it remains constant and does not alter

What is the reason for not getting an assigned value in the line val3.value = parseInt(val1.value + val2.value);? Is it because the specified value "NaN" cannot be parsed, or is it out of range? var val1 = parseInt(document.getElementById("num1")); var ...

Vee Validate encountered a SyntaxError due to an invalid regular expression

I am utilizing VeeValidate along with regex to enforce password requirements, which include having at least two characters from the following categories: uppercase letters, lowercase letters, numbers, and symbols. v-validate="required|min:8|max:20|regex:/ ...

Error: The prop type validation failed because a `value` prop was provided to a form field in React-Bootstrap-Typehead component

I am currently using the bootstrap-typehead package from https://github.com/ericgio/react-bootstrap-typeahead and struggling to understand why it's causing issues. Could someone help me identify what's wrong with this code that's triggering ...

Dynamic Pagination with MUI Counting

I'm currently utilizing mui react for my current project. Within the Pagination component, I am required to input the count in order to display the total number of pages. For example, with a total of 27 products, and each page displaying 20 products ...

Field Invalid in Asana

I am trying to send the following JSON data to asana's "tasks" endpoint using a POST request. { "data": { "options": { "fields": [ "name", "notes" ] }, "workspace": & ...

Is it possible to use wildcards in Socket.io rooms or namespaces?

The hierarchy I am working with is as follows: Store -> Manager -> Assistant In this setup, a Manager has access to everything that the Assistant sends, while the Assistant can only access what the Manager explicitly provides. My understanding is t ...

Creating a List of Properties from a JSON Object in C#

Can anyone help me with building a property list that includes the property path of a JSON object? I am not familiar with the structure of the JSON or the keys that could be present. I am interested in extracting the keys at all levels (excluding the valu ...

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Is there a way to create a site where user data is inputted into an input box or form, and then that information is stored in a .txt file on the user's C drive without uploading it to a server first? I've been experimenting with various forms an ...

Creating a nx workspace for vanilla JavaScript (Error: module 'typescript' not found) - Step-by-step guide

Looking to set up a new workspace for plain React applications. How can I do it? Create Workspace npx create-nx-workspace@latest # version 15.2.1 # style: package-based # distributed caching: NO Installing the react-package npm install -D @nrwl/react Cr ...

Tips for showing a limited number of results the first time in an AngularJS application

I am a beginner in AngularJS and Ajax requests. I created a demo where I make an Ajax request to get remote data and display it in a list. My goal is to initially show only 10 results when the page loads for the first time, and then load the next 10 result ...

Implementing defaultProps in conjunction with withStyles

Currently, I am in the process of developing a component using material-ui withStylers and defaultProps. However, I have encountered an issue where the props of the component are not being retrieved in the styles objects unless they are explicitly passed t ...

Information on the Manufacturer of Devices Using React Native

Struggling to locate the device manufacturer information. Using the react-native-device-info library produces the following output. There seems to be an issue with handling promises. I need to store the device manufacturer value in a variable. const g ...

Retrieving a universal variable within AngularJS

Is there a way to initialize an Angular model using a JSON object that is embedded within an HTML page? Take this as an example: <html> <body> <script type="text/javascript" charset="utf-8"> var tags = [{&q ...

What advantages come from caching the document object for improved performance?

Usually, I cache DOM objects used in a script. However, recently I found myself having to reference the document object within a jQuery wrapper. I started questioning whether caching $(document) is necessary since there's only one document object per ...

Mastering the art of using res.send() in Node.js

I have been working on a project using the mongoose API with Node.js/Express. There seems to be an issue with my get request on the client side as the data is not coming through. Can someone help me figure out what's wrong? Snippet of backend app.ge ...