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!

CodePudding user response：

If I understand the problem right, this is something about json and arrays, not about rxjs.

Anyways, again if the understanding is right, the following could be an option.

Let's assume that the myJson constant holds the the json you are providing as example, i.e.

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

then a solution could look like this

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

What you end up in having in result is an array [4, 3] which is the expected result.

Here a stackblitz example.

CodePudding user response：

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/app/app.component.ts