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

Question

I would like to count the amount of array items from a nested array.

I have done this successfully in a not so deeply nested array, and I am curious how I can create a similar outcome with a one level deeper example.

This is how the well-working one goes:

  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;
      });
} 

The itemcount is what I am looking for. This is usable in my template.

Now, another similar component has the length/count one level deeper, this was my attempt at gaining the array-item-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;
  })
  )
  }

Also tried this (among a lot more):

   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;
  })
  )
  }

Here I added the this.sublist = this.list.sublist in between. However not able to get this one working.

Can you help me to count the amount of array-items inside 'item'?

Maybe useful to add, below the json I receive from my backend:

In this particular example the outcomes should be 4 and 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"
        }
      ]
    }
  ]
}

Thanks a lot for having a look!

Answer 1

I made a small loop to check if we have an Array on key item and if so, we count its length and add it to the sum. If you want any deeper we could introduce recursion on this but I hope this gets you going.

@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

Here is a working example: https://stackblitz.com/edit/angular-ivy-wpyfox?file=src%2Fapp%2Fapp.component.ts