Vue.js how to fix the error: Uncaught TypeError: data.filter is not a function in my code?

Question

I have a structure in json this way:

    itens: {"countcats":2,"countsubcats":7,
            "catsubcatsdata":{
                "15978738e6cd1e":{"title":"Test 1","description":"blablabla",
                    "subcats":{
                        "1597873b1653d9": {"codurl":"t01url","title":"Teste subiten 1","description":""},
                        "1597873bd76c80": {"codurl":"t01url2","title":"Testing sub two","description":""},
                        "1597873c9d4a81": {"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"},
                        }},
                "15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet",
                    "subcats":{
                        "159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},
                        "159787472eb5e6":{"codurl":"donecorci ","title":"Donec hendrerit orci","description":""},
                        "15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum", "description":""},
                        "159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum. Quisque efficitur nec sapien eu ultricies"}
                        }}
                }}

I have the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
	<input type="text" placeholder="Search" v-model="searchQuery">

  <ul>
    <li v-for="(value, key) in filteredList">
          <b>{{ value.title }}</b><br>{{ value.description }}
			<ul>
			  <li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
			</ul>
    </li>
  </ul>
</div>

<script>
    new Vue({
        el: '#v-for-sectors',
        data: {
            searchQuery: '',
            itens: {"catsubcatsdata":{"15978738e6cd1e":{"title":"Test 1","description":"blablabla","subcats":{"1597873b1653d9":{"codurl":"t01url","title":"Teste subiten 1","description":""},"1597873bd76c80":{"codurl":"t01url2","title":"Testing sub two","description":""},"1597873c9d4a81":{"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"}}},"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet","subcats":{"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},"159787472eb5e6":{"codurl":"donecorci","title":"Donec hendrerit orci","description":""},"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum","description":""},"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum."}}}}}
		},
        computed: {
            filteredList: function () {
              var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
              var data = this.itens.catsubcatsdata
				if (filterKey) {
					data = data.filter(function (row) {
                              return Object.keys(row).some(function (key) {
                                return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                              })
							})
				}
                return data
            }
        }
    });
</script>

I've tried to follow the logic of this example: https://br.vuejs.org/v2/examples/grid-component.html

But I do not understand why you are returning the following error data.filter is not a function"

I would like to do a search on all titles and descriptions of items and subitems.

Could someone explain to me where I am wrong and what correct way to do ??

Answer 1

filter is a method for array and datais an object. Get the object keys using the Object.keys method, then use reduce to transform the array into an object again.

new Vue({
  el: '#v-for-sectors',
  data: {
    searchQuery: '',
    itens: {
      "catsubcatsdata": {
        "15978738e6cd1e": {
          "title": "Test 1",
          "description": "blablabla",
          "subcats": {
            "1597873b1653d9": {
              "codurl": "t01url",
              "title": "Teste subiten 1",
              "description": ""
            },
            "1597873bd76c80": {
              "codurl": "t01url2",
              "title": "Testing sub two",
              "description": ""
            },
            "1597873c9d4a81": {
              "codurl": "t01url3",
              "title": "Test sub 3",
              "description": "blablabla 01"
            }
          }
        },
        "15978745b32c1b": {
          "title": "Loren Ipsun",
          "description": "lamet dectoid samet",
          "subcats": {
            "159787464bc887": {
              "codurl": "maecenas",
              "title": "Maecenas pulvinar",
              "description": "orci non volutpat varius"
            },
            "159787472eb5e6": {
              "codurl": "donecorci",
              "title": "Donec hendrerit orci",
              "description": ""
            },
            "15978748b89bca": {
              "codurl": "massadictum",
              "title": "Nullam eu massa dictum",
              "description": ""
            },
            "159787495492f4": {
              "codurl": "ultricies",
              "title": "Etiam massa arcu",
              "description": "Donec ultricies porttitor augue quis dictum."
            }
          }
        }
      }
    }
  },
  computed: {
    filteredList: function() {
      var filterKey = this.searchQuery &&
        this.searchQuery.toLowerCase();

      var data = this.itens.catsubcatsdata;

      if (!filterKey) {
        return data;
      }

      return Object.keys(this.itens.catsubcatsdata)
        .filter(function(key) {
          var row = data[key];

          return Object.keys(row)
            .some(function(key) {
              return String(row[key])
                .toLowerCase()
                .indexOf(filterKey) > -1;
            })
        })
        .reduce(function(acc, key) {
          acc[key] = data[key];

          return acc;
        }, {})

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
  <input type="text" placeholder="Search" v-model="searchQuery">
  <ul>
    <li v-for="(value, key) in filteredList">
      <b>{{ value.title }}</b><br>{{ value.description }}
      <ul>
        <li v-for="(vsub, keysub) in value.subcats">
          <a :href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

The problem is here:

var data = this.itens.catsubcatsdata
if (filterKey) {
    data = data.filter(function (row) {

catsubcatsdata is an Object, not an Array. filter is an Array method.