计算 angular 中接收到的嵌套数组中的数组子项/项的数量，rxjs

Question

我想计算嵌套数组中数组项的数量。

我已经在嵌套不太深的数组中成功完成了这项工作，我很好奇如何使用更深一层的示例创建类似的结果。

工作良好的人是这样的：

  const listId = this.route.snapshot.paramMap.get('listId');
  this.listService.getShortlist(listId)
    .subscribe(list => 
      {this.list = list;
      this.showEditlink = this.list.sublistCreators.find(element => element === this.username);
      this.itemcount = this.list.shortlistItem.length;
      });
}

itemcount 正是我要找的。这在我的模板中可用。

现在，另一个类似的组件 length/count 更深一层，这是我获得数组项计数的尝试：

getList(): void {
const listId = this.route.snapshot.paramMap.get('listId');
console.log("het list-id = " + listId);
this.listService.getListNo404(listId)
  .subscribe((list => 
    {this.list = list;     
    this.itemcount = this.list.sublist.item.length;
  })
  )
  }

也试过这个（还有很多）：

   getList(): void {
const listId = this.route.snapshot.paramMap.get('listId');
console.log("het list-id = " + listId);
this.listService.getListNo404(listId)
  .subscribe((list => 
    {this.list = list; 
    this.sublist = this.list.sublist    
    this.itemcount = this.sublist.item.length;
  })
  )
  }

这里我在中间加上了this.sublist = this.list.sublist。但是无法让这个工作。

你能帮我数一数 'item' 中数组项的数量吗？

在我从后端收到的 json 下面添加可能有用：

在此特定示例中，结果应为 4 和 3。

{
  "_id": {
    "$oid": "dummy"
  },
  "listTitle": "dummy",
  "listCreator": "dummy",
  "sublist": [
    {
      "subListCreator": "dummy",
      "subListAdded": {
        "$date": dummy
      },
      "item": [
        {
          "positionId": 1,
          "itemScore": 3,
          "itemTitle": "dummy",
          "itemContext": "dummy"
        },
        {
          "positionId": 2,
          "itemScore": 2,
          "itemTitle": "dummy",
          "itemContext": "dummy"
        },
        {
          "positionId": 3,
          "itemScore": 1,
          "itemTitle": "dummy",
          "itemContext": "dummy"
        },
        {
          "positionId": 4,
          "itemScore": 1,
          "itemTitle": "dummy",
          "itemContext": "dummy"
        }
      ]
    },
    {
      "subListCreator": "dummy",
      "subListAdded": {
        "$date": dummy
      },
      "item": [
        {
          "positionId": 1,
          "itemScore": 3,
          "itemTitle": "dummy"
        },
        {
          "positionId": 2,
          "itemScore": 2,
          "itemTitle": "dummy",
          "itemContext": "dummy"
        },
        {
          "positionId": 3,
          "itemScore": 1,
          "itemTitle": "dummy"
        }
      ]
    }
  ]
}

非常感谢您的观看！

Answer 1

我做了一个小循环来检查键 item 上是否有数组，如果有，我们计算它的长度并将其加到总和中。如果您想要更深入，我们可以对此引入递归，但我希望这能让您继续前进。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  itemCount: number;
  constructor() {
    this.countItems();
  }

  countItems() {
    let count: number = 0;
    for (let obj of this.returnObjWithArray(this.target)) {
      if (Object.keys(obj).some((key) => key == 'item')) {
        console.log('match: ', obj);
        console.log('the count:', obj.item.length);
        count += obj.item.length;
      }
    }
    console.warn('the sum: ', count);
  }

  returnObjWithArray(obj: any) {
    for (let prop in obj) {
      if (Array.isArray(this.target[prop])) {
        console.log('the obj with array: ', this.target[prop]);
        return this.target[prop];
      }
    }
  }

  target = {
    _id: {
      $oid: 'dummy',
    },
    listTitle: 'dummy',
    listCreator: 'dummy',
    sublist: [
      {
        subListCreator: 'dummy',
        subListAdded: {
          $date: 'dummy',
        },
        item: [
          {
            positionId: 1,
            itemScore: 3,
            itemTitle: 'dummy',
            itemContext: 'dummy',
          },
          {
            positionId: 2,
            itemScore: 2,
            itemTitle: 'dummy',
            itemContext: 'dummy',
          },
          {
            positionId: 3,
            itemScore: 1,
            itemTitle: 'dummy',
            itemContext: 'dummy',
          },
          {
            positionId: 4,
            itemScore: 1,
            itemTitle: 'dummy',
            itemContext: 'dummy',
          },
        ],
      },
      {
        subListCreator: 'dummy',
        subListAdded: {
          $date: 'dummy',
        },
        item: [
          {
            positionId: 1,
            itemScore: 3,
            itemTitle: 'dummy',
          },
          {
            positionId: 2,
            itemScore: 2,
            itemTitle: 'dummy',
            itemContext: 'dummy',
          },
          {
            positionId: 3,
            itemScore: 1,
            itemTitle: 'dummy',
          },
        ],
      },
    ],
  };
}

console.log()

match:
{subListCreator: "dummy", subListAdded: {…}, item: Array[4]}
the count:
4
match:
{subListCreator: "dummy", subListAdded: {…}, item: Array[3]}
the count:
3
the sum:
7

这是一个工作示例：https://stackblitz.com/edit/angular-ivy-wpyfox?file=src%2Fapp%2Fapp.component.ts

Answer 2

如果我理解正确的话，这是关于 json 和数组的问题，而不是关于 rxjs 的问题。

总之，再说一遍，如果理解正确的话，下面的可以作为一个选项。

让我们假设 myJson 常量包含您作为示例提供的 json，即

const myJson = {
  "_id": {
    "$oid": "dummy"
  },
.....
}

那么解决方案可能如下所示

const subList = myJson.sublist;
const itemList = subList.map((listEl) => listEl.item);
const result = itemList.map((items) => items.length);

您最终在 result 中得到的是一个数组 [4, 3]，这是预期的结果。

这里是stackblitz example.

计算 angular 中接收到的嵌套数组中的数组子项/项的数量，rxjs

Count the amount of array-childs / items in received nested array in angular, rxjs

arrays

nested

rxjs

angular