How to do a search filter on a multidimensional json object with vue.js

Question

I have a structure in json this way (I can not change the data in this json):

    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
              var dataarray =  Object.keys(data)
          
          if (!filterKey) { return data; }
  
          return dataarray
                .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>

I would like it when typing in the search something about the title or description of the category displaying something like this:

(This is already working.)

But when the word was from the title or description of a subcategory, it should show:

(This is not working.)

Can anyone help me on how to make this work?

I noticed that all of your data is contained in objects instead of arrays. That will make your life miserable, as the array manipulation functions (map, filter, reduce) will not work with objects. — James
– James, Commented Feb 19, 2019 at 22:36
@James Yes, and unfortunately I can not change the data received in json. :( — Samanta Silva
– Samanta Silva, Commented Feb 19, 2019 at 22:38
@James But if it was in array do you have an idea of how it could be done? Maybe it helps me get an idea of how to convert to object. — Samanta Silva
– Samanta Silva, Commented Feb 19, 2019 at 22:40
@James Maybe in PHP I can handle json and change it to a way that works easier, but I do not know how it should be. If you can help me with any answer, maybe I can find a way. — Samanta Silva
– Samanta Silva, Commented Feb 19, 2019 at 22:42
Stay with object data type would easier to access & manipulate the node data. You can still loop through object's props and do filter it right? It's not relate to Vuejs. — Neo.Mxn0
– Neo.Mxn0, Commented Feb 20, 2019 at 2:39

Roy J · Accepted Answer · 2019-02-20 02:16:52Z

As I understand it, you want to filter by your search term, including the entire entry for any that match title or description in the top-level, or including the top-level and only matching sub-levels that match if the match is in a sub-level and not in the top level.

So first I made a method matches so that code isn't messy. Then I made a computed to return the values of interest as a list. Then I made a computed to filter those values based on the criteria above, constructing a new object with only matching subcats when that was where the match was.

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."
            }
          }
        }
      }
    }
  },
  methods: {
    matches(obj) {
      const term = this.searchQuery.toLowerCase();

      return obj.title.toLowerCase().includes(term) || obj.description.toLowerCase().includes(term);
    }
  },
  computed: {
    listValues() {
      return Object.values(this.itens.catsubcatsdata);
    },

    filteredList() {
      if (!this.searchQuery) {
        return this.listValues;
      }

      return this.listValues
        .map((v) => {
          if (this.matches(v)) {
            return v;
          }

          const matchingSubcats = Object.values(v.subcats)
            .filter((v) => this.matches(v));
            
          if (matchingSubcats.length > 0) {
            return Object.assign({}, v, {subcats: matchingSubcats});
          }
        })
        .filter((v) => v);
    }
  }
});

<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 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>

Genius, Thank you. The only thing, thats ended up missing the key code, this is very important to me. But I managed to solve by manipulating json with php. Your code worked perfectly.

Collectives™ on Stack Overflow

How to do a search filter on a multidimensional json object with vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related