Angular 2 Array.map returns undefined

Question

I'm stuck with return a value using Array.map in Angular 2 So what am I missing here?

export class TabsPage {
    @ViewChild(SuperTabs) superTabs: SuperTabs;

    public rootTab: string = 'ProductListPage';
    public categories: Array<any>;
    public collection_id: number;
    public selectedindex: any;

    private getArrayIndex(source, target) {
        source.map((element, index) => {
            if (element.attrs.collection_id === target) {
                // Returns the Value i need
                console.log('i: ', index);
                return index;
            }
        });
    }

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public shopifyClientProvider: ShopifyClientProvider,
        private superTabsCtrl: SuperTabsController,
    ) {
        this.categories = navParams.get('collections');
        this.collection_id = navParams.get('collection_id');
        this.selectedindex = this.getArrayIndex(this.categories, navParams.get('collection_id'));

        // Returns undefined
        console.log('Index ', this.selectedindex);
    }
}

yes because you are checking condition with element.attrs.collection_id === target and inside of if you returning some index. If condition is not matched by default it will undefined return. map(). Instead of that use filter() — Narendra Jadhav
– Narendra Jadhav, Commented Apr 25, 2018 at 13:06
But then the console.log should also return undefined. And even if i define this "return 1", the result is "undefined" — magic.77
– magic.77, Commented Apr 25, 2018 at 13:08
if your condition not matched then it will not go inside of if you can try with debugger. — Narendra Jadhav
– Narendra Jadhav, Commented Apr 25, 2018 at 13:10
No, that is not the Problem. Checked that with Debugger. And the Condition is fullfilled. It seems that Typescript breaks the return. — magic.77
– magic.77, Commented Apr 25, 2018 at 13:39

Krishna Rathore · Accepted Answer · 2018-04-25 13:30:06Z

2

I know this question is already answered but I have one solution for this same.

.ts file code

 private getArrayIndex(source, target) {
  let indx = -1;
  source.map((element, index) => {
    if (element.attrs.collection_id === target) {
      // Returns the Value i need
      console.log('i: ', index);
      indx = index;
    }
  });
  return indx;
}

answered Apr 25, 2018 at 13:30

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon Taylor · Accepted Answer · 2018-04-25 13:46:15Z

1

You can use findIndex() to do this in pretty short order:

I don't know exactly what your data looks like, but given an array:

const target = 2;
const source = [
  {
    attrs: {
      collection_id: 1
    }
  },
  {
    attrs: {
      collection_id: 2
    }
  },
  {
    attrs: {
      collection_id: 3
    }
  },
];

const index = source.findIndex(element => element.attrs.collection_id === target);

would return 1 for the index. If the index isn't found, -1 will be returned.

Plunkr: https://plnkr.co/edit/5B0gnREzyz6IJ3W3

Hope that helps you out.

edited Apr 25, 2018 at 13:46

answered Apr 25, 2018 at 13:37

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

2 Comments

magic.77 Over a year ago

Hi Brandon. Thanks for this Solution. It works for me

Brandon Taylor Over a year ago

Super! Always glad to help.

magic.77 · Accepted Answer · 2018-04-25 13:42:36Z

0

Looks like Typescript breaks the return. With this modification i get the desired Value:

private getArrayIndex(source, target) {
    let found: number;
    source.map((element, index) => {
        if (element.attrs.collection_id === target) {
            console.log('i: ', index);
            found = index;
        }
    });
    return found;
}

answered Apr 25, 2018 at 13:42

magic.77

9171 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 2 Array.map returns undefined

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related