Implementing a search filter in Vue.js using a nested for loop

Question

Implementing a search filter in Vue.js using a nested for loop

I am currently working with a JSON object that contains nested objects and I need to iterate over them to extract data. Everything is functioning correctly, but now I want to implement a search/filter feature where the search is performed on the second level of the nested for loop. I have made some progress with it, but I am not receiving any data in return. Here is an example:

Link to Example

In the HelloWorld component, you will see where the search/filter functionality is being applied. However, it seems to stop outputting data after passing through the searchFilter method.

To disable the search/filter and get everything to display again, modify line #6 as follows:

from:

<div class="contentSingle" v-for="(c, i) in searchFilter" :key="i">

to:

<div class="contentSingle" v-for="(c, i) in cont" :key="i">

If anyone has suggestions on what can be done to resolve this issue, please let me know. My goal is to filter by the elements within each content inside the main data object. The data object can be found within the FauxData/dataContent.js directory.

Thank you!

-S

javascript json vue.js search filter

Answer 1

Answer №1

It is recommended to utilize methods instead of computed properties:

  methods: {
    filterContent(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

Incorporate the following code snippet in your HTML structure:

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in content" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in filterContent(cont)" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

Update Applied

If you wish to hide the empty section, consider using a computed value:

  computed: {
    filteredData() {
      return Object.keys(this.content).reduce((a, cKey) => {
        const data = this.filterContent(this.content[cKey]);
        if (data.length) {
          a[cKey] = data;
        }
        return a;
      }, {});
    }
  },
  methods: {
    filterContent(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

Implement filteredData in the outer v-for loop

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in filteredData" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in cont" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

See demonstration on codepen

Answer 2

It is recommended to utilize methods instead of computed properties:

  methods: {
    filterContent(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

Incorporate the following code snippet in your HTML structure:

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in content" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in filterContent(cont)" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

Update Applied

If you wish to hide the empty section, consider using a computed value:

  computed: {
    filteredData() {
      return Object.keys(this.content).reduce((a, cKey) => {
        const data = this.filterContent(this.content[cKey]);
        if (data.length) {
          a[cKey] = data;
        }
        return a;
      }, {});
    }
  },
  methods: {
    filterContent(content) {
      return content.filter(item => {
        let itemUpper = item.content.toUpperCase();
        let searchUpper = this.search.toUpperCase();
        return itemUpper.indexOf(searchUpper) > -1;
      });
    }
  }

Implement filteredData in the outer v-for loop

  <section id="content">
    <input type="text" id="search" name="search" v-model="search" placeholder="Search Content...">
    <div v-for="(cont, index) in filteredData" :key="index" class="contentWrapper">
      <h1>{{ index }}</h1>
      <div class="contentSingle" v-for="(c, i) in cont" :key="i">
        <h3>{{ c.title }}</h3>
        <div v-html="c.content"></div>
      </div>
    </div>
  </section>

See demonstration on codepen

Implementing a search filter in Vue.js using a nested for loop

Answer №1

Similar questions

Using jQuery to remove the last two characters from a specified class

Webpack is unable to locate a specific custom JavaScript file

Exploring Touch Interactions in Vue.js 2.0

JavaScript function not being executed after AJAX response in HTML

Accessing images from subreddit using reddit API

Is there an issue with retrieving JSON data in Swift 4?

Transforming timestamps to month day, year format and back again without the use of any NPM packages

Setting up initial values for React properties

Can you explain the significance of @id and @type within a json-ld context?

Is it possible to activate the :active pseudoclass by pressing the 'enter' key on the keyboard using solely CSS?

Unable to display the attributes of an object using console.log

I'm stumped by this code; I can't figure out what's going wrong

Javascript: Uncaught TypeError - Unable to assign value to non-existent property

I am looking to create a password generator that saves all generated options to a file

Are there any significant advantages other than SEO for CSR + SSR web applications like nuxtjs and nextjs?

Gulp is showing an error of "Module Not Found" despite the module being present in the project

Verify whether a div element is styled in a specific manner

Stream of information that triggers a specific action based on a specified condition

Please provide values in the input box, with each value separated by

Is there a way to prevent the window.on('beforeUnload') event from triggering when using the <a> tag?