如何使用 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.