Question

我有以下数组，我正在尝试通过提供ID使用.find打印子数组值

connections = [
    {
      group: 'a',
      items: [
        {
          id: '1',
          name: 'Andre'
        },
        {
          id: '2',
          name: 'David'
        }
      ]
    },
    {
      group: 'b',
      items: [
        {
          id: '3',
          name: 'Brandon'
        }
      ]
    },
]

我已经在Angular应用中尝试了以下方法

getUser(id) {
    this.activeItem = this.connections.items.find(data => data.id === id);
    console.log(this.activeItem);
}

我提供了正确的ID，但出现错误提示

错误TS2339：类型上不存在属性“项目”。

谢谢。

Answer 1

您可以使用 flatMap

尝试这样：

getUser(id) {
  this.activeItem = this.connections.flatMap(x => x.items).find(data => data.id === id);
  console.log(this.activeItem);
}

Working Demo

Answer 2

正如我从Json对象中看到的那样，items数组被分组在其父对象中。因此，首先您必须展平分组数组：

let items = []
connections.forEach(obj => obj.items.forEach( item => items.push(item)))

现在items数组仅是项对象，因此查找起来会更容易：

items.find(item => item.id == 3)

Answer 3

您可以使用<table> <tbody> <tr class="m-s-3"> <td>A</td> <td>B</td> <td>20</td> <td>D</td> </tr> <tr class="m-s-3"> <td>A</td> <td>B</td> <td> <span>44</span> </td> <td>D</td> </tr> <tr class="m-s-3"> <td>A</td> <td>B</td> <td>55</td> <td>D</td> </tr> </tbody> </table>和filter方法。这种方法将过滤数组，并且您的数组将仅包含所需的项目：

some

此外，可以使用flatMap method。通过使用这种方法，您将获得所有具有所需let connections = [ { group: 'a', items: [ { id: '1', name: 'Andre' }, { id: '2', name: 'David' } ] }, { group: 'b', items: [ { id: '3', name: 'Brandon' } ] }, ] let id = 3; // ONE WAY const result = connections.filter(f=> f.items.some(s=> s.id == id)) .flatMap(fm => fm.items); console.log(`result: `, result); // OR ANOTHER WAY: const resultWithGroup = connections.filter(f=> f.items.some(s=> s.id == id)); const resultItem = Object.assign({}, ...resultWithGroup).items.find(f => f.id == id); console.log(`resultItem: `, resultItem); console.log(`resultItem as an array: `, [resultItem]);的项目，然后找到具有id的第一个元素：

id == 3

Answer 4

您尝试使用数组而不指定数组元素

-----------------\/ here
this.connections[0].items.find(data => data.id === id);

Answer 5

通常会出现以下错误：“错误TS2339：属性'items'在类型上不存在...。” 实际上，“连接”是一个数组，没有任何适当的“项目”。 “项目”是“连接”数组中包含的元素的属性。

您可以尝试以下方法：

getUser(id) {
    for (const element of this.connections) {
      this.activeItem = element.items.find(data => data.id === id);
      if (this.activeItem) {
          break;
      }
    }
    console.log(this.activeItem);
}

一旦找到“ this.activeItem”，我们将以“ break;”退出循环；声明。

Answer 6

“ this.connections.items.find”不起作用的原因是，此处的连接变量表示对象数组，因此无法直接访问包含在对象数组中的对象内部的键。

改为使用以下代码：

this.activeItem = this.connections.filter(obj => obj.items.find(val => val.id == id));
console.log(this.activeItem.items);

Answer 7

connections变量是一个数组，您试图将其作为对象进行访问。 PFB下面的代码对您来说应该可以正常工作。

    getUser(id) {
        this.activeItem = connections.find(function(element) {  return element.items.find(function(el){return el.id==id;}); });
        console.log(this.activeItem); 
}

Answer 8

尝试一下。（您为connections.items弄错了）

getUser(id) {
    let activeItemIndex = -1;
    this.connections.forEach((c) => {
      activeItemIndex = c.items.findIndex(item => item.id === id);
      if (activeItemIndex > -1) {
        this.activeItem = c.items[activeItemIndex];
      }
    });
}

Answer 9

您必须指定index中的connections。

但这是更好的解决方案，因为您将所有用户都放在一个位置：

getUser(id) {
    users = connections.reduce((users, item)=>{
        users.push(...item.items);
        return users;
    }, []);
    this.activeItem = users.find(data => data.id === id);
    console.log(this.activeItem);
}

从具有给定ID的子数组中获取价值

9 个答案: