Guide on searching in a multidimensional array with VueJS or JavaScript

Question

Guide on searching in a multidimensional array with VueJS or JavaScript

Recently, I started embarking on a project using Vue JS and as a newbie to the framework, I came across a certain dilemma. How can I retrieve all data with an id of 1 when I input a specific value? Below is an illustration of my data structure:

 {
    'A': [{
        1: [{
            id: 1, 
            name: 'John'
        }],
        2: [{
            id: 5,
            name: 'Ken'
        }]
    }],
    'B': [{
        1: {
            id: 1,
            name: 'Leena'
        }
    }],
    'C': [{
        1: [{
            id: 1,
            name: 'Jesica'
        }],
        2: [{
            id: 18,
            name: 'Mike'
        }]
    }]
}

The desired outcome should resemble the following, given that they share the same id value:

{
    'A': [{
        1: [{
            id: 1, 
            name: 'John'
        }]
    }],
    'B': [{
        1: {
            id: 1,
            name: 'Leena'
        }
    }],
    'C': [{
        1: [{
            id: 1,
            name: 'Jesica'
        }]
    }]
}

javascript arrays multidimensional-array vue.js frontend

Answer 1

Answer №1

If you are in control of the data structure format, consider changing it to something more manageable. One approach is to assign each capital letter property an array of objects:

let dataset = { 
  'A': [{id: 1, name: 'John'}, {id: 2, name: 'Sally'}],
  'B': [{id: 1, name: 'Bob'}],
  ...
}

An even better option would be to structure the data as an array of objects with a capital letter designated as the group property value and the id-name pairs as people property values (or any other logical designation):

let dataset = [{
    group: 'A', people: [{id: 1, name: 'John'}, {id: 2, name: 'Sally'}],
  }, {
    group: 'B', people: [{id: 1, name: 'Bob'}],
  }, {
    ...
}]

With this setup, filtering data by a specific id becomes quite straightforward:

function filterObject(foo, id) {
  return foo.map(i => i.people.filter(j => j.id == id));
}

You can view a working example here.

If you must work with the complex data structure provided, here is a function that can help achieve your goals:

let filterObject = function(foo, id) {
  let bar = {};

  Object.keys(foo).map((key) => {
    for (let i = 0; i < foo[key].length; i++) {
      Object.keys(foo[key][i]).map((index) => {
        for (let j = 0; j < foo[key][i][index].length; j++) {
          if (foo[key][i][index][j].id != id) {
            continue;
          }

          if (!bar[key]) {
            bar[key] = [];
          }
          if (!bar[key][i]) {
            bar[key][i] = {};
          }
          if (!bar[key][i][index]) {
            bar[key][i][index] = [];
          }

          bar[key][i][index][j] = foo[key][i][index][j];
        }
      })
    }
  });

  return bar
}

Explore a functional demo here.

Answer 2

If you are in control of the data structure format, consider changing it to something more manageable. One approach is to assign each capital letter property an array of objects:

let dataset = { 
  'A': [{id: 1, name: 'John'}, {id: 2, name: 'Sally'}],
  'B': [{id: 1, name: 'Bob'}],
  ...
}

An even better option would be to structure the data as an array of objects with a capital letter designated as the group property value and the id-name pairs as people property values (or any other logical designation):

let dataset = [{
    group: 'A', people: [{id: 1, name: 'John'}, {id: 2, name: 'Sally'}],
  }, {
    group: 'B', people: [{id: 1, name: 'Bob'}],
  }, {
    ...
}]

With this setup, filtering data by a specific id becomes quite straightforward:

function filterObject(foo, id) {
  return foo.map(i => i.people.filter(j => j.id == id));
}

You can view a working example here.

If you must work with the complex data structure provided, here is a function that can help achieve your goals:

let filterObject = function(foo, id) {
  let bar = {};

  Object.keys(foo).map((key) => {
    for (let i = 0; i < foo[key].length; i++) {
      Object.keys(foo[key][i]).map((index) => {
        for (let j = 0; j < foo[key][i][index].length; j++) {
          if (foo[key][i][index][j].id != id) {
            continue;
          }

          if (!bar[key]) {
            bar[key] = [];
          }
          if (!bar[key][i]) {
            bar[key][i] = {};
          }
          if (!bar[key][i][index]) {
            bar[key][i][index] = [];
          }

          bar[key][i][index][j] = foo[key][i][index][j];
        }
      })
    }
  });

  return bar
}

Explore a functional demo here.

Guide on searching in a multidimensional array with VueJS or JavaScript

Answer №1

Similar questions

Using a button to wrap a router-link element in Vue.js

What sets apart an exception from a promise left unfulfilled?

Creating Vue components based on a deeply nested data structure

What is causing the lack of rendering in a React component after modifying the state?

What is the best way to determine the size of a char array?

Beginner Attempting to Create a JavaScript Age Calculator

Manipulating the content of an array based on a specific key value using JavaScript's

Exploring the use of the "++" operator in Regular

The animation of a disappearing div with CSS is not stopping when hovering over it

Is it necessary for a TypeScript Library's repository to include the JavaScript version?

Find the location in a node.js script where a promise was rejected

The JQuery ajax post function is typically called towards the conclusion of a JavaScript script

Combining arrays with identical values into a new array?

Guide to keeping numerous movie titles in an array with a for loop in Java

Having trouble getting images to display in Vue markdown?

Are There Any Techniques for Adding Objects to an Array in a Unique Way?

Looking for assistance with resizing and repositioning an image within a viewport?

Using Chance JS library in Vue.js

JavaScript first, middle, and last names

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay