What is the best way to add a filter to a nested array?

Question

What is the best way to add a filter to a nested array?

I am currently facing a challenge in creating a multiple filter for multiple arrays without duplicating the nested array. I am working with vuejs and some plugins that are relying on the array, so my only option is to filter it without modifying it.

Using draggablevue, I have set up a list of arrays that can be sorted. My goal is to keep the main array intact and only filter the "inv" array based on name or code. I've tried using forEach, map, and filter methods, but haven't been able to find a solution online.

let invNameFilter = "chair";
let invCodeNameFilter = "1234";
let rooms = [
        {
          name: "Room 1.14",
          inv: [
            {
              name: "chair",
              inventoryCode: "1234"
            },
            {
              name: "painting",
              inventoryCode: "4321"
            },
            {
              name: "table",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Room 1.12",
          inv: [
            {
              name: "table",
              inventoryCode: "4321"
            },
            {
              name: "chair",
              inventoryCode: "4321"
            }
          ]
        }
      ];

let invNameFilter = "chair";
let invCodeNameFilter = "1234";
let rooms = [
        {
          name: "Room 1.14",
          inv: [
            {
              name: "chair",
              inventoryCode: "1234"
            },
            {
              name: "table",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Room 1.12",
          inv: [
            {
              name: "chair",
              inventoryCode: "4321"
            }
          ]
        }
      ];

javascript arrays vue.js filter

Answer 1

Answer №1

To achieve the desired outcome with your existing object structure, a combination of map, filter, and Object spread operations can be utilized.

Utilize map (to retain all outer objects)
Implement Object spread (for overriding inv while filtering)
Apply Filter on inv (use filter function to return the specific results)

const rooms = [
  {
    name: "Room 1.14",
    inv: [
      {
        name: "chair",
        inventoryCode: "1234"
      },
      {
        name: "whiteboard",
        inventoryCode: "4321"
      },
      {
        name: "table",
        inventoryCode: "1234"
      }
    ]
  },
  {
    name: "Room 1.12",
    inv: [
      {
        name: "table",
        inventoryCode: "4321"
      },
      {
        name: "chair",
        inventoryCode: "4321"
      }
    ]
  }
];

const filteredRooms = rooms.map(x => ({
                        ...x, 
                        inv: x.inv.filter(k => k.name === "chair" || k.inventoryCode === "1234") 
                      }))

console.log(filteredRooms);

Answer 2

To achieve the desired outcome with your existing object structure, a combination of map, filter, and Object spread operations can be utilized.

Utilize map (to retain all outer objects)
Implement Object spread (for overriding inv while filtering)
Apply Filter on inv (use filter function to return the specific results)

const rooms = [
  {
    name: "Room 1.14",
    inv: [
      {
        name: "chair",
        inventoryCode: "1234"
      },
      {
        name: "whiteboard",
        inventoryCode: "4321"
      },
      {
        name: "table",
        inventoryCode: "1234"
      }
    ]
  },
  {
    name: "Room 1.12",
    inv: [
      {
        name: "table",
        inventoryCode: "4321"
      },
      {
        name: "chair",
        inventoryCode: "4321"
      }
    ]
  }
];

const filteredRooms = rooms.map(x => ({
                        ...x, 
                        inv: x.inv.filter(k => k.name === "chair" || k.inventoryCode === "1234") 
                      }))

console.log(filteredRooms);

Answer 3

Answer №2

Take note that this particular code does not alter the initial salas array.

new Vue({
  data() {
    return {
      name: "chair",
      code: "1234",
      salas: [{
          name: "Room 1.14",
          inv: [{
              name: "chair",
              inventoryCode: "1234"
            },
            {
              name: "painting",
              inventoryCode: "4321"
            },
            {
              name: "table",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Room 1.12",
          inv: [{
              name: "table",
              inventoryCode: "4321"
            },
            {
              name: "chair",
              inventoryCode: "4321"
            }
          ]
        }
      ]
    }
  },
  computed: {
    filteredSalas() {
      // Alternatively, you can use _.deepClone (a lodash function)
      const arr = JSON.parse(JSON.stringify(this.salas));

      arr.forEach(obj => {
        obj.inv = obj.inv.filter(item => item.name === this.name && item.inventoryCode === this.code);
      });

      return arr;
    }
  },
  template: "<div>{{ filteredSalas }}</div>"
}).$mount("#app");

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

Answer 4

Take note that this particular code does not alter the initial salas array.

new Vue({
  data() {
    return {
      name: "chair",
      code: "1234",
      salas: [{
          name: "Room 1.14",
          inv: [{
              name: "chair",
              inventoryCode: "1234"
            },
            {
              name: "painting",
              inventoryCode: "4321"
            },
            {
              name: "table",
              inventoryCode: "1234"
            }
          ]
        },
        {
          name: "Room 1.12",
          inv: [{
              name: "table",
              inventoryCode: "4321"
            },
            {
              name: "chair",
              inventoryCode: "4321"
            }
          ]
        }
      ]
    }
  },
  computed: {
    filteredSalas() {
      // Alternatively, you can use _.deepClone (a lodash function)
      const arr = JSON.parse(JSON.stringify(this.salas));

      arr.forEach(obj => {
        obj.inv = obj.inv.filter(item => item.name === this.name && item.inventoryCode === this.code);
      });

      return arr;
    }
  },
  template: "<div>{{ filteredSalas }}</div>"
}).$mount("#app");

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

What is the best way to add a filter to a nested array?

Answer №1

Answer №2

Similar questions

How to properly declare an explicit injector when using the resolve parameter in $routeProvider?

Sinon experiences delays during an AJAX call

Struggling to generate a JSON file as a PHP warning keeps popping up

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

Toggle visibility of cards using bootstrap

Tips on avoiding scrolling when toggling the mobile navigation bar:

Setting up Webpack and Babel for ReactJS development

"Encountering issues with Rails and AJAX where the data returning is showing up

Issues with template literals not displaying line breaks

Having trouble with jQuery attribute selectors? Specifically, when trying to use dynamic attribute

The parent element of a 3D div is causing issues with hovering and clicking on the child elements

Guide to utilizing Vue-Router and Gorilla Mux Router simultaneously

How can I integrate Apple remote support into a website with the use of Javascript?

Using AngularJS to send a post request with cherrypy

Improving iframe functionality in AngularJS

Manipulating binary data through the use of encodeURIComponent

Error occurred while looking for user by ID in the everyauth

Difficulty loading AngularJS 1.3 page on Internet Explorer 8

The login page allows entry of any password

Is there an issue with loading Vue list rendering due to Axios not returning the data?