@justalever (Andy Leverenz) posted a new topic, subject "Vue JS nested loop search not returning results". It read:

   I'm building a key-command resource and giving VueJS a whirl while doing so. I'm a newbie but am gaining the grasp of things (slowly…).
    
    I want to be able to search in a global search form for key commands I'm defining as **actions** within sections of commands (see data example below). I would like to search through all the actions to show only those that match the search criteria.
    
    My HTML is below:
    [code] 
        <div id="commands">
        
          <input v-model="searchQuery" />
        
          <div class="commands-section" v-for="item in sectionsSearched" 
        :key="item.id">
        
            <h3>{{ item.section }}</h3>
        
            <div class="commands-row" v-for="command in item.command" :key="command.action"> 
                  {{ command.action }}
            </div>
        
          </div>
        </div>
        
    [/code]
    
    My main Vue instance looks like this:
    [code] 
        import Vue from 'vue/dist/vue.esm'
        import { commands } from  './data.js'
        
        document.addEventListener('DOMContentLoaded', () => {
        
          const element = document.getElementById("commands")
        
          if (element != null) {
        
          const app = new Vue({
            el: element,
            data: {
              searchQuery: '',
              commands: commands
            },
            computed: {
              sectionsSearched() {
                var self = this;
                return this.commands.filter((c) => {
                  return c.command.filter((item) => {
                    console.log(item.action)
                    return item.action.indexOf(self.searchQuery) > -1;
                   });
                  });
                },
              }
            });
          }
        });
        
    [/code]
    
    And finally the data structure in `data.js`
    [code] 
        const commands = [
          {
             section: "first section",
             command: [
               { action: '1' },
               { action: '2' },
               { action: '3' },
             ],
          },
          {
             section: "second section",
             command: [
               { action: 'A' },
               { action: 'B' },
               { action: 'C' },
             ]
          },  
        ]
        
        export { commands };
        
    [/code]
    
    I'm able to output the commands using the `console.log(item.action)` snippet you see in the computed method called `sectionsSearched`.
    
    I see no errors in the browser and the data renders correctly.
    
    I **cannot** however filter by searching in real-time. I'm nearly positive it's a combination of my data structure + the computed method. Can anyone shed some insight as to what I'm doing wrong here?
    
    I'd ideally like to keep the data as is because it's important to be sectioned off.
    
    I'm a Rails guy who is new to this stuff so any and all feedback is welcome.
    
    Thanks!

To which @bolerodan (Dan W) replied

    Regardless of the output of your inner loop, you are always returning an array (empty or not) which is a truthy response to the outer most filter. What you want to do is base this inner return value from say, an integer (0 is false, anything above 0 is truthy)
    
    Look at my example fiddle  
    https://jsfiddle.net/8euLpj0t/
    
    essentially I return the length of the array to the outer filter.
    [code] 
                return this.commands.filter((c) => {
                  return c.command.filter((item) => {
                    return item.action.indexOf(self.searchQuery) > -1;
                   }).length
                  });
        
    [/code]
    
    another tip. Since you are using arrow functions, you have no need to use the old case of creating an outer scope variable like `self`. You can reference `this` directly in any of your nested arrow functions.

To which @bolerodan (Dan W) replied

    justalever:
    
    > **EDIT**
    > 
    > I've tried the proposed solutions below but keep getting `undefined` in any query I pass. The functionality seems to work in most cases for something like this:
    
    I would probably hit reply than edit, so I (and others) know you responded to them.
    
    Other tips, you do not need to do > 0 for the returning of .length (this is an exception to the indexOf method, as 0 is a valid position and thus -1 is falsy). integers cast to booleans or truthy values (those greater than 1 for example, it's implicit).
    
    secondly, did you look at my fiddle? What is undefined, have you debugged your inner loop, assign the results to a variable, output the results with console.log instead of directly returning so you can inspect what is undefined and where, or use your web browser developer tools and create a break mark to inspect the variables in memory.
    
    This code works, and is shown directly within the JSfiddle. I would double check your code and reference the example fiddle.

After which, @justalever (Andy Leverenz) added

    Thanks for the response, much appreciated and all appears to be working logically.
    
    I'm still having rendering issues on the front-end, The list of items in my `v-row` definitions don't seem to be updating as I type into the input. Any guesses as to why? I can `console.log (item.action.indexOf(this.searchQuery) > -1)` and get `true` and `false` to output but getting them to update in the DOM in real time fails.
    
    **Edit:**  
    So it does update but I want to update and show only each command that comes back. Currently, it's showing the “section” instead of the “action” if that makes sense.

@bolerodan (Dan W) replied

    justalever:
    
    > **Edit:**  
    >  So it does update but I want to update and show only each command that comes back. Currently, it's showing the “section” instead of the “action” if that makes sense.
    
    Right, so you would then need to further filter that array as well, so it would most likely be yet again, another nested filter on your actions key.


{'source': 'discourse', 'url': 'https://forum.vuejs.org/t/vue-js-nested-loop-search-not-returning-results/40887', 'title': 'Vue JS nested loop search not returning results', 'views': 1055, 'has_accepted_answer': False, 'word_count': 808, 'like_count': 3, 'reply_count': 2, 'participant_count': 2, 'posts': 5, 'tags': '', 'author': '@justalever (Andy Leverenz)', 'participants': '@justalever (Andy Leverenz), @bolerodan (Dan W)', 'image_url': [None], 'created_at': '2018-08-14T15:05:21.698Z', 'last_posted_at': '2018-08-14T15:59:16.438Z'}