Why is Mapping not working after flattening an array of arrays

Issue

I am trying to find out why flattening this array of arrays to an array of objects won't let me map it? If I change the array manually to an array of objects the mapping works fine. The flattening works as it does work in the multi-select dropdown I am using and wouldn't work until I flattened it.

The following code won't build, it says that the x.displayValue doesn't exist - when in fact it does.

import { Component, OnInit, VERSION } from '@angular/core';
import { IDropdownSettings } from 'ng-multiselect-dropdown';


@Component({
  selector: 'app-flatten-arrays',
  templateUrl: './flatten-arrays.component.html',
  styleUrls: ['./flatten-arrays.component.css']
})
export class FlattenArraysComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  selectedInstitutions = [
    [{ displayValue: 'ABC', id: 781 }],
    [{ displayValue: 'DEF', id: 782 }],
  ];

  abbreviation = { institutionIds: 1 };

  transcriptSettings: IDropdownSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'displayValue',
    selectAllText: 'Select All',
    unSelectAllText: 'Unselect All',
    itemsShowLimit: 3,
    allowSearchFilter: true,
  };

  ngOnInit() {


    // this.selectedInstitutions = ([] as any[]).concat(...this.selectedInstitutions);
    this.selectedInstitutions = ([] as any[]).concat(...this.selectedInstitutions);

    const temp = this.selectedInstitutions.map(x => <any>{
      title: x.displayValue
    });

  }
}

I am just doing the mapping just for testing. But if I comment out the mapping code, it works fine - which is why I know it is flattened. But why does it say the x.displayValue doesn't exist. Is my mapping code incorrect? I am assuming this is now an array of objects.

Solution

From this line,

selectedInstitutions = [
  [{ displayValue: 'ABC', id: 781 }],
  [{ displayValue: 'DEF', id: 782 }],
];

the variable was declared as any[][] a.k.a Array of Array type.

Even you have flattened the array in ngOnInit, the variable is still as Array of Array type.

ngOnInit() {
  this.selectedInstitutions = ([] as any[]).concat(
    ...this.selectedInstitutions
  );
}

Hence, the x is an array instead of an object.

const temp = this.selectedInstitutions.map(
  (x) =>
    <any>{
      title: x.displayValue,
    }
);

---

Solution (but not suggested)

For quick fixing, specify x as any.

But NOT SUGGESTED as the same issue (conflict in variable type) will still happen when you do a similar logic like iterate with selectedInstitutions.

const temp = this.selectedInstitutions.map(
  (x: any) =>
    <any>{
      title: x.displayValue,
    }
);

Solution

1. Declaring another variable institutions, that hold the initial value (with any[][] type).
2. Flatten institutions and assign to selectedInstitutions (any[] type).
3. Use selectedInstitutions for the array iteration.

selectedInstitutions: any[];

institutions = [
  [{ displayValue: 'ABC', id: 781 }],
  [{ displayValue: 'DEF', id: 782 }],
];

ngOnInit() {
  this.selectedInstitutions = ([] as any[]).concat(
    ...this.institutions
  );

  const temp = this.selectedInstitutions.map(
    (x: any) =>
      <any>{
        title: x.displayValue,
      }
  );
}

Sample Demo on StackBlitz

Answered By - Yong Shun