javascript - 如何使用 VueJS 或 JavaScript 在多维数组中进行搜索

Question

我正在开发一个 Vue 项目，而且我刚刚接触 Vue JS，我的问题是当我输入值时如何返回 id 为 1 的所有数据。下面是我的数据的示例结构。

 {
    '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'
        }]
    }]
}

预期结果应该是(如下)，因为它们都有相同的 id 值

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

Answer 1

如果您可以控制数据结构的格式，我会将其更改为更易于管理的格式。例如，将每个大写字母属性设置为对象数组:

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

更好的方法是使数据结构成为一个对象数组，其中大写字母作为 group 属性值，而 id-name 对象作为 people 属性值(或任何对您有意义的内容):

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

使用这种结构，通过特定id过滤数据会相对简单:

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

Here's a working fiddle.

<小时/>

如果您确实需要使用您提供的疯狂数据结构，这里有一个函数可以满足您的需要:

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
}

Here's a working fiddle.