I am trying to loop an array levels using Vue.js, I could to get the response json in actions with function forEach like:

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

then stored data in state, there any way to filter by TYPE and then loop Data somehow to render in a select, data...etc. using V-for in Vue.js?

My 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': []
        }
      ]
    }
  ]

I am trying to loop an array levels using Vue.js, I could to get the response json in actions with function forEach like:

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

then stored data in state, there any way to filter by TYPE and then loop Data somehow to render in a select, data...etc. using V-for in Vue.js?

My 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': []
        }
      ]
    }
  ]

• javascript
• json
• vue.js
• multidimensional-array
• vuex

2 Answers 2

<div v-for="filter in filters">... </div>

puted: {
    filters() {
        return this.data.filter(item => item.type === 'filter')
    }
}

You can use below code in .vue file.

1. save your above filters array to data variable in vue file.

   data() {
      return {
         filters: []
      }
   }
   
   const array = response.data;
   
   array.forEach((element) => {
      this.filters.push(element);
   })
   

2. and in html template use v-for like below.

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