Filtering an array within an array based on user input

Question

Filtering an array within an array based on user input

I am currently facing a challenge in filtering the child elements of an array. I am puzzled on how to specifically target children elements. So far, my filter is only functioning at the top level.

Array:

options: [
                    {name: 'Выход детали из строя в процессе эксплуатации', value: null,
                        children: [{name: 'Увеличение зазора, люфт (дробь/стуки)', value: 53},
                                    {name: 'Обрыв детали', value: 54}]},

                    {name: 'Поломка при установке', value: null},

                    {name: 'Брак до установки', value: null,
                        children: [{name: 'Недокомплект', value: 55},
                                    {name: 'Заводской брак (замятия, отсутствие резьбы, пробой пыльника и т.д.)',
                                        value: 56}]},

         ],

List output:

    <div v-if="areOptionsVisible"
         :style="{maxHeight: maxHeight, overflow: 'auto', zIndex: zIndex}"
         class="w-autocomplete__items">
        <div v-for="option in filteredOptions" class="w-autocomplete__item_first" >
            {{ option.name }}

                <div v-for="item in option.children" class="w-autocomplete__item"
                    :class="{'w-autocomplete__item_active': currentIndex === item}"
                    @mouseenter="setActive(item)"
                     @keyup.up="changeCurrent('up', item)"
                     @keyup.down="changeCurrent('down', item)"
                     @click="doChoose(item)">
                    {{ item.name }}
                </div>
        </div>
    </div>

Filter:

computed: {
        filteredOptions(){
            return this.options.filter(elem => {
                return elem.name.toLowerCase().includes(this.searchText.toLowerCase());
            });
        },
    },

javascript vue.js

Answer 1

Answer №1

Utilize the flatMap method to flatten and map the array while applying a filter within it:

computed: {
        filteredOptions(){
           return this.options.flatMap(option => {
               return option.children;
            }).filter(elem => {
            return elem && elem.name.toLowerCase().includes(this.searchText.toLowerCase());
         });
        },
    }

JS Example

let options = [{
    name: 'smith',
    value: null,
    children: [{
        name: 'john',
        value: 53
      },
      {
        name: 'Обрыв детали',
        value: 54
      }
    ]
  },

  {
    name: 'foobar',
    value: null
  },

  {
    name: 'foo',
    value: null,
    children: [{
        name: 'bar',
        value: 55
      },
      {
        name: 'aaaa',
        value: 56
      }
    ]
  },

]

let filtered =
  options.flatMap(option => {
    return option.children;
  }).filter(elem => {
    return elem && elem.name.toLowerCase().includes('bar');
  })

console.log(filtered)

Answer 2

Utilize the flatMap method to flatten and map the array while applying a filter within it:

computed: {
        filteredOptions(){
           return this.options.flatMap(option => {
               return option.children;
            }).filter(elem => {
            return elem && elem.name.toLowerCase().includes(this.searchText.toLowerCase());
         });
        },
    }

JS Example

let options = [{
    name: 'smith',
    value: null,
    children: [{
        name: 'john',
        value: 53
      },
      {
        name: 'Обрыв детали',
        value: 54
      }
    ]
  },

  {
    name: 'foobar',
    value: null
  },

  {
    name: 'foo',
    value: null,
    children: [{
        name: 'bar',
        value: 55
      },
      {
        name: 'aaaa',
        value: 56
      }
    ]
  },

]

let filtered =
  options.flatMap(option => {
    return option.children;
  }).filter(elem => {
    return elem && elem.name.toLowerCase().includes('bar');
  })

console.log(filtered)

Answer 3

Answer №2

It's important to apply the filter function on the children elements. To achieve this, I suggest modifying your outer filter to a map and then use filter inside it as shown below.

return this.options.map(elem => {
   return elem.children.filter(childElem => {
     return childElem.name.toLowerCase().includes(this.searchText.toLowerCase());
   });
});

Answer 4

It's important to apply the filter function on the children elements. To achieve this, I suggest modifying your outer filter to a map and then use filter inside it as shown below.

return this.options.map(elem => {
   return elem.children.filter(childElem => {
     return childElem.name.toLowerCase().includes(this.searchText.toLowerCase());
   });
});

Answer 5

Answer №3

Give this a shot.

options.forEach(function(option) {
      return option.children.forEach(function(child) {
         return child.label
    })
    })

Answer 6

Give this a shot.

options.forEach(function(option) {
      return option.children.forEach(function(child) {
         return child.label
    })
    })

Filtering an array within an array based on user input

Answer №1

Answer №2

Answer №3

Similar questions

Can you explain the distinction between compiled and interpreted programming languages?

Enhancing jQuery Functionality with Parameter Overrides

Troubleshooting Date Problems in Angular

Error: Attempting to append a child to a non-existent property

Package videojs along with the videojs-ima extension

Tips on connecting data within a jQuery element to a table of data

Transferring data securely via URLs

CSS code for vertical navigation arrows to remain on both the left and right sides of the webpage

Tips for extracting the most deeply nested object in a JSON file using JavaScript

After generating the dist folder using Webpack, how can we then transfer the bundle.js and css file into the statics folder?

Substitute link with asynchronous JavaScript and XML

Unable to locate the JavaScript files within the NextJs and ReactJs project

Issue: Vue.js is not recognizing the proxy configuration in vue.config.js file

Retrieving data from a database using PHP and presenting it in a loop for showcasing in JavaScript

Angular Form Validation: Ensuring Data Accuracy

Using jQuery's each method to implement dynamic fallback with JSON data

Moving the starting directory of a NodeJS application on Azure

The Vue.js reactivity system does not detect changes when a property is updated within a WebRTC callback

Experimenting with parallelism using TypeScript/JS

Running jQuery in AngularJS partialsHow can I incorporate jQuery into AngularJS partials?