Retrieve the object filtered by a specific group from an array of data

Question

Retrieve the object filtered by a specific group from an array of data

I have a data object that contains various groups and rules within each group item. My task is to filter the rules based on a search query, while also displaying the group name associated with the filtered rule.

{
  "id": "rulesCompany",
  "group": [
    {
      "name": "Cadastral",
      "rule": [
        {
          "title": "Receita Federal",
          "description": "Source updated monthly.",
          "homonym": false,
          "criticality": "high"
        },
        {
          "title": "Primary CNAE - Alteration",
          "description": "Source updated monthly.",
          "homonym": false,
          "criticality": "high"
        }
      ]
    },
    {
      "name": "Modeled Data",
      "rule": [
        {
          "title": "Activity Level - Alteration",
          "description": "Source updated monthly.",
          "homonym": false,
          "criticality": "high"
        },
        {
          "title": "Presumed Revenue",
          "description": "Source updated monthly.",
          "homonym": false,
          "criticality": "medium"
        }
      ]
    }
  ]
}

For instance, if I search for "Rece" in the search field, I should return the group "Cadastral/Receita Federal". However, I am facing challenges in filtering data nested within the object.

Below is what I've implemented so far:

Module.vue

(pre-formatted code block)

Expected Outcome Object when searching for "Rec":

pre-formatted code block

https://i.stack.imgur.com/Fa9qg.png

javascript vue.js vuejs2

Answer 1

Answer №1

Here is a computed prop that you can try out:

filteredPolicyRules() {
  if (this.searchQuery) {
    return this.policyRules.group.reduce((groups, { name, rule }) => {
      const rules = [];

      rule.forEach(r => {
        if (r.title.startsWith(this.searchQuery)) {
          rules.push(r);
        }
      });

      if (rules.length > 0) {
        groups.push({
          name,
          rules
        });
      }

      return groups;
    }, []);
  }

  return this.policyRules;
}

I recommend naming them groups and rules (plural) to prevent confusion in the future since they are arrays.

Check out the full demo below:

const policyRules = {
  "id": "rulesCompany",
  "group": [{
    "name": "Cadastral",
    "rule": [{
      "title": "Receita Federal",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    {
      "title": "Primary CNAE - Change",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    ]
  },
  {
    "name": "Modeled Data",
    "rule": [{
      "title": "Activity Level - Change",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    {
      "title": "Presumed Revenue",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "medium"
    }
    ]
  }]
};

new Vue({
  el: '#app',

  data() {
    return {
      searchQuery: '',
      policyRules
    }
  },

  computed: {
    filteredPolicyRules() {
      if (this.searchQuery) {
        return this.policyRules.group.reduce((groups, { name, rule }) => {
          const rules = rule.filter(this.matchFilter);

          if (rules.length > 0) {
            groups.push({
              name,
              rules
            });
          }

          return groups;
        }, []);
      }

      return this.policyRules;
    }
  },

  methods: {
    matchFilter(item) {
      const
        search = this.searchQuery.toLowerCase(),
        term = (item.title || '').toLowerCase();

      return term.includes(search);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="searchQuery" placeholder="Search..." />
  <pre>{{ filteredPolicyRules }}</pre>
</div>

Answer 2

Here is a computed prop that you can try out:

filteredPolicyRules() {
  if (this.searchQuery) {
    return this.policyRules.group.reduce((groups, { name, rule }) => {
      const rules = [];

      rule.forEach(r => {
        if (r.title.startsWith(this.searchQuery)) {
          rules.push(r);
        }
      });

      if (rules.length > 0) {
        groups.push({
          name,
          rules
        });
      }

      return groups;
    }, []);
  }

  return this.policyRules;
}

I recommend naming them groups and rules (plural) to prevent confusion in the future since they are arrays.

Check out the full demo below:

const policyRules = {
  "id": "rulesCompany",
  "group": [{
    "name": "Cadastral",
    "rule": [{
      "title": "Receita Federal",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    {
      "title": "Primary CNAE - Change",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    ]
  },
  {
    "name": "Modeled Data",
    "rule": [{
      "title": "Activity Level - Change",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "high"
    },
    {
      "title": "Presumed Revenue",
      "description": "Updated source monthly.",
      "homonym": false,
      "criticality": "medium"
    }
    ]
  }]
};

new Vue({
  el: '#app',

  data() {
    return {
      searchQuery: '',
      policyRules
    }
  },

  computed: {
    filteredPolicyRules() {
      if (this.searchQuery) {
        return this.policyRules.group.reduce((groups, { name, rule }) => {
          const rules = rule.filter(this.matchFilter);

          if (rules.length > 0) {
            groups.push({
              name,
              rules
            });
          }

          return groups;
        }, []);
      }

      return this.policyRules;
    }
  },

  methods: {
    matchFilter(item) {
      const
        search = this.searchQuery.toLowerCase(),
        term = (item.title || '').toLowerCase();

      return term.includes(search);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="searchQuery" placeholder="Search..." />
  <pre>{{ filteredPolicyRules }}</pre>
</div>

Answer 3

Answer №2

Initially, I stored your list in a variable called map. Then, I filtered this map by searching for the desired properties that contain the specified search term. The array.filter method creates a new array based on the true and false results of the filtering process.

I specifically checked the fields for name, title, and description, making everything lowercase to ensure case insensitivity.

You can refer to Array.prototype.filter documentation for more information.


const searchTerm = 'CNE';

console.log(map.filter(entry => {
  const { name } = entry;
  if(contains(name, searchTerm)) return true;

  for(const rule of entry.rule) {
    const { title, description } = rule;
    if(contains(title, searchTerm)) return true;
    if(contains(description, searchTerm)) return true;
  }
  return false;
}));

function contains(string, term) {
  return string.toLowerCase().includes(term.toLowerCase());
}

I also recommend following Yom's suggestion in his answer to use clearer names like groups and rules, allowing you to improve readability. This would result in

groups.filter(group => {[..]})

and for(const rule of group.rules).

Answer 4

Initially, I stored your list in a variable called map. Then, I filtered this map by searching for the desired properties that contain the specified search term. The array.filter method creates a new array based on the true and false results of the filtering process.

I specifically checked the fields for name, title, and description, making everything lowercase to ensure case insensitivity.

You can refer to Array.prototype.filter documentation for more information.


const searchTerm = 'CNE';

console.log(map.filter(entry => {
  const { name } = entry;
  if(contains(name, searchTerm)) return true;

  for(const rule of entry.rule) {
    const { title, description } = rule;
    if(contains(title, searchTerm)) return true;
    if(contains(description, searchTerm)) return true;
  }
  return false;
}));

function contains(string, term) {
  return string.toLowerCase().includes(term.toLowerCase());
}

I also recommend following Yom's suggestion in his answer to use clearer names like groups and rules, allowing you to improve readability. This would result in

groups.filter(group => {[..]})

and for(const rule of group.rules).

Retrieve the object filtered by a specific group from an array of data

Answer №1

Check out the full demo below:

Answer №2

Similar questions

Identify the element in the array that corresponds to the current route

When the document is shifted by an angular function call, the mouseup event fails to trigger

Issue with Axios Response Interceptor on Vuejs causing failure to pass response data

Having trouble resolving the FancyBox Jquery conflict and unable to find a solution

What is the best way to access a database connection throughout an entire node.js application?

When utilizing a third-party library in conjunction with Vuetify, the V-menu may have a tendency to automatically close right after

JavaScript code returning the correct result, however, it is unable to capture all characters in the returned string

Tips for eliminating whitespace from an input field and then updating the field with the trimmed value

Adjust the app's color scheme using Vuex's Store functionality

"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

Modifying the background color and linking it to a different class in Android Studio: A step-by-step guide

What steps can be taken to further personalize this pre-existing jQuery sorting solution?

The IE9 confirmation dialog fails to pause for user response, resulting in automatic postback before user input is received

Creating an HTTP request inside an Export Function in a MEANJS application

What method can I use to identify the most widely-used edition of a specific npm module?

A guide on how to reset Orbit Controls once the target has been defined

Change the icon switch from fas fa-lock-open to fas fa-lock by adding an event listener for a click action

Erase jQuery from the text

What is the best way to update the $scope of a directive from another directive's controller in Angular.js?

What is the best way to establish a two-way connection between two arrays?