如何使用 VueJS 或仅使用 javascript 在多维数组中搜索

Posted 2023-02-22

【中文标题】如何使用 VueJS 或仅使用 javascript 在多维数组中搜索

【英文标题】：How to search in a multi dimensional array using VueJS or just javascript

【发布时间】：2017-10-24 01:26:00

【问题描述】：

我正在做一个 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'
        ]
    ]

【问题讨论】：

这是一个奇怪的数据结构。每个对象属性是否总是包含一个只包含一个对象的数组？

不，这只是一个例子，只要输入值等于我要搜索的字段值，它就可以返回多个数组

因此，假设您的对象名为“foo”。您的意思是foo['A'][0][1] 可能是一个包含许多对象的数组，并且您希望在过滤后的数组中返回任何带有id==1 的对象？

正是@thanksd，这是我在我的应用程序上尝试做的事情jsbin.com/dezokiwowu/edit?html,js,console,output

您只需要按对象属性名称过滤对象数组吗？这就是您的应用中的样子，它不使用这种疯狂的数据结构。

【参考方案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.

【讨论】：

@PenAndPapers 查看我的更新答案，了解如何更改数据结构以使过滤功能更简单