Custom JSON filtering

Question

Custom JSON filtering

I have a JSON object called Menu which contains various menu items for my system that I am developing using VueJS + Vuetify. I need to filter these menu items based on the "text" field, regardless of position in the text and without differentiating between upper and lower case letters, similar to SQL's like '%filter%' query. It would be ideal if accents are also disregarded but not crucial.

If the search pattern matches a child node, should the parent node also be included in the filtered results? Is it possible to achieve this filtering behavior using a JavaScript function?

The structure of the menu is as shown below:

https://i.sstatic.net/8Dt9N.png

Here is the expected behavior after filtering:

https://i.sstatic.net/Bz4KY.png

javascript json vue.js filter vuetify.js

Answer 1

Answer №1

If you're looking to extract the text fields of child elements, one way to do it is by initializing all parent elements with empty arrays for children like this:

 childrenWithoutText = Menu.filter(function (item) {
  return item.children == null ;
}); 
 textFieldsExtracted = childrenWithoutText.map(({ text }) => text)

Answer 2

If you're looking to extract the text fields of child elements, one way to do it is by initializing all parent elements with empty arrays for children like this:

 childrenWithoutText = Menu.filter(function (item) {
  return item.children == null ;
}); 
 textFieldsExtracted = childrenWithoutText.map(({ text }) => text)

Answer 3

Answer №2

Learn how to use regular expressions to filter matches in an array.

var arr = [{
    icon: "add",
    text: "Cargar Pedidos",
    url: {
      name: "cargarpedidos"
    }
  },
  {
    icon: "playlist_add_check",
    text: "Aprobar Pedidos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pedidos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pedisddos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pediados"
  },
  {
    icon: "content_copy",
    text: "Remitir asdaasd"
  }
];

var name = "dido";
var regex = "/" + name + "/g";
var filtered = arr.filter(
  (val) => val.text.match(name)
);

console.log(filtered);

These are the fundamentals of filtering. Use this function if you want to search for any property in an array object:

var result = Menu.filter(function(o) {
  return Object.keys(o).some(function(k) {
    return o[k].toString().toLowerCase().indexOf('dido') != -1;
  })
})

console.log(result)

Answer 4

Learn how to use regular expressions to filter matches in an array.

var arr = [{
    icon: "add",
    text: "Cargar Pedidos",
    url: {
      name: "cargarpedidos"
    }
  },
  {
    icon: "playlist_add_check",
    text: "Aprobar Pedidos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pedidos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pedisddos"
  },
  {
    icon: "content_copy",
    text: "Remitir Pediados"
  },
  {
    icon: "content_copy",
    text: "Remitir asdaasd"
  }
];

var name = "dido";
var regex = "/" + name + "/g";
var filtered = arr.filter(
  (val) => val.text.match(name)
);

console.log(filtered);

These are the fundamentals of filtering. Use this function if you want to search for any property in an array object:

var result = Menu.filter(function(o) {
  return Object.keys(o).some(function(k) {
    return o[k].toString().toLowerCase().indexOf('dido') != -1;
  })
})

console.log(result)

Custom JSON filtering

Answer №1

Answer №2

Similar questions

VueJs Plugin for Adobe XD Development

Error: The src for the image of the double cheeseburger could not be properly parsed by the `next/image` component

Is there a chart tool that allows for editing graphs by simply dragging points?

I need help getting my Vue.JS project to function properly when it is deployed on a server

Verifying the "select" dropdown option prior to final submission

"Encountering a net::ERR_UNKNOWN_URL_SCHEME error message when making an Ajax post request

JS custom scrollbar thumb size issues in relation to the scroll width of the element

What is the best way to display an image path and add it to the Ajax success function in a CodeIgniter application?

Updating a section of a webpage using jQuery Mobile

Simulating an API request using Vue and Jest/Vue test utils

Parsing Retrofit responses in real-time

An error has occurred with the Firefox Addon: the module `path` cannot be located within the resource://gre/modules/commonjs/http.js

Getting rid of the border next to v-navigation-drawer in Vue.js

The Ionic tab is already finished displaying even before the data has completed loading

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Retrieve items within an array of objects in MongoDB using an array of IDs (using the $in operator in aggregation)

Transition and transition-group animations in Vue.js do not seem to be functioning correctly

Annoying jQuery animation error: struggling to animate smoothly and revert back. Callback function conundrum?!

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

Developing a standalone Vue component within an expansive project