How to define Typescript Map of key value pair. where key is a number and value is an array of objects

Question

In my angular2 app i want to create a map which takes a number as key and returns an array of objects. I am currently implementing in following way but no luck. How should i implement it or should i use some other data structure for this purpose? I want to use map because maybe its fast?

Declaration

 private myarray : [{productId : number , price : number , discount : number}];

priceListMap : Map<number, [{productId : number , price : number , discount : number}]> 
= new Map<number, [{productId : number , price : number , discount : number}]>();

Usage

this.myarray.push({productId : 1 , price : 100 , discount : 10});
this.myarray.push({productId : 2 , price : 200 , discount : 20});
this.myarray.push({productId : 3 , price : 300 , discount : 30});
this.priceListMap.set(1 , this.myarray);
this.myarray = null;

this.myarray.push({productId : 1 , price : 400 , discount : 10});
this.myarray.push({productId : 2 , price : 500 , discount : 20});
this.myarray.push({productId : 3 , price : 600 , discount : 30});
this.priceListMap.set(2 , this.myarray);
this.myarray = null;

this.myarray.push({productId : 1 , price : 700 , discount : 10});
this.myarray.push({productId : 2 , price : 800 , discount : 20});
this.myarray.push({productId : 3 , price : 900 , discount : 30});
this.priceListMap.set(3 , this.myarray);
this.myarray = null;

I want to get an array of 3 objects if i use this.priceList.get(1);

Solution 1

First thing, define a type or interface for your object, it will make things much more readable:

type Product = { productId: number; price: number; discount: number };

You used a tuple of size one instead of array, it should look like this:

let myarray: Product[];
let priceListMap : Map<number, Product[]> = new Map<number, Product[]>();

So now this works fine:

myarray.push({productId : 1 , price : 100 , discount : 10});
myarray.push({productId : 2 , price : 200 , discount : 20});
myarray.push({productId : 3 , price : 300 , discount : 30});
priceListMap.set(1 , this.myarray);
myarray = null;

(code in playground)

Solution 2

The most simple way is to use Record type Record<number, productDetails>

interface productDetails {
   productId : number , 
   price : number , 
   discount : number
};

const myVar : Record<number, productDetails> = {
   1: {
       productId : number , 
       price : number , 
       discount : number
   }
}

Solution 3

you can also skip creating dictionary altogether. i used below approach to same problem .

     mappedItems: {};
     items.forEach(item => {     
            if (!mappedItems[item.key]) {
              mappedItems[item.key] = [];
            }
            mappedItems[item.key].push({productId : item.productId , price : item.price , discount : item.discount}));
        });

Comments

[usmanwalana]

In your playground link there is an error in console Uncaught TypeError: Cannot read property 'push' of undefined(…) I implemented it using an interface and i got the same error.

[Nitzan Tomer]

That's because I just copied your code, and in your code you are setting myarray to null and then try to push to it. So either don't set it to null, or just reassign a new array later

[d-man]

I am getting error on type keyword, using typescript 2.1.0

[Nitzan Tomer]

@Faisalkhan That shouldn't happen. Type aliases were added in typescript 1.4. What's the error you're getting?