How to map a subarray

Issue

I am using a sample I found online to map a subarray and can't seem to get it to work.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map-subarray',
  templateUrl: './map-subarray.component.html',
  styleUrls: ['./map-subarray.component.css']
})
export class MapSubarrayComponent implements OnInit {

  books: any[] = [
    {
      title: 'Books by Nigerian authors',
      // An array of books in shelves
      shelves: [
        {
          id: 1,
          category: 'Fiction',
          title: 'Things fall Apart',
          author: 'Chinua Achebe'
        },
        {
          id: 2,
          category: 'drama',
          title: 'Under the Udala trees',
          author: 'Chinelo Okparanta'
        }
      ]
    }
  ];
  categories: any[] = [];

  constructor() { }

  ngOnInit(): void {
    // Gets the selves from the books array
    this.categories = this.books.map((book) => this.books.shelves);
    
    // Gets the list of categories on the shelves
    this.categories = this.books.map((book) => book.shelves.map((shelf) => shelf.category);
  }

}

But I get an error in the first map on shelves:

And an error on shelf for the second mapping line. Perhaps fixing the 1st map will lead to fixing the second.

jitendra's answer works fine.

But I am curious why using the map for shelves gives me back an array which I cannot apparently use - ie. shelves.title. And it doesn't work in the template with the *ngFor.

But the index one does work.

Does that have something to do with flattening?

Solution

To get shelves you didn't require use map function.

You can use the below code to get shelves. as you can see in the first index of the array you have shelves. so you need to 0th index to get shelves.

this.categories = [...this.books[0].shelves];

Or using if you want to use map then you can use this code:

this.categories = this.books.map((book) => this.books[0].shelves);

// Gets the list of categories on the shelves

I think you missed one round bracket. You can try this code:

this.categories = this.books.map((book) => book.shelves.map((shelf) => shelf.category));
 // this.categories It will console ["Fiction","drama"]
 console.log(this.categories);

Answered By - Jitendra