javascript : mapping same key to different arrays

Question

I am trying to populate dropdown(s) on select of an option in 1st dropdown(product), using pure java script. But got struck at mapping respective files to product, especially when the same version number repeats for different products

following is the data set.

 productA => version1.0.0 => FileA1.zip
 productA => version1.0.1 => FileA2.zip

 productB => version3.5.0 => FileB1.zip
 productB => version4.0.1 => FileB2.zip

 productC => version1.0.0 => FileC1.zip
 productC => version1.0.1 => FileC2.zip

My javascript arrays

 var ProductNameMap = {
        "ProductA":["1.0.0","1.0.1"],
        "ProductB":["3.5.0","4.0.1"], 
        "ProductC":["1.0.0","1.0.1"],   
};

//want to map files specifically associated with particular product
var ProductSeriesMap = {
    "version1.0.0":["FileA1.zip"],
    "version1.0.1":["FileA2.zip"]
    };

How can I differentiate between ProductA => version1.0.0 and ProductC => version1.0.0 during this mapping ?

My html

 <html>
 <body>
   Product:
<select id="product" onchange="changeproduct">
    <option>--Choose Product--</option>
</select><br/>
Version:<select id="version"  onchange="changeversion" ></select><br/>
File:<select id="file"></select>
<script>
//have my java script here to populate dropdowns 
</script>

lid · Accepted Answer · 2015-06-04 15:57:08Z

3

have it all in one structure

var ProductsMap = {
        "ProductA":{"1.0.0":"File1-a1.zip","1.0.1":"File-a2.zip"},
        "ProductC":{"1.0.0":"File-c1.zip","1.0.1":"File-c2.zip"},   
};

when user select ProductA you have all versions and associated files

ProductsMap.ProductA

when user select ProductC you have all versions and associated files at

ProductsMap.ProductC

answered Jun 4, 2015 at 15:57

lid

2041 silver badge6 bronze badges

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

Comments

Gnanadurai Asudoss · Accepted Answer · 2015-06-04 15:58:39Z

1

var ProductSeriesMap={
"ProductA": new Map{"version1.0.0":["FileA1.zip"],"version1.0.1":["FileA2.zip"]},
"ProductB": new Map{"version1.0.0":["FileA1.zip"],"version1.0.1":["FileA2.zip"]},
}

You need to create like this;

Map[key,Map[key,value]];

answered Jun 4, 2015 at 15:58

Gnanadurai Asudoss

2891 gold badge2 silver badges15 bronze badges

1 Comment

Benjamin Solum Over a year ago

It should be pointed out that Maps require somewhat recent browser support: kangax.github.io/compat-table/es6/#Map

Benjamin Solum · Accepted Answer · 2015-06-04 17:56:13Z

1

I think changing up your objects a little bit would help. You can iterate over this structure with a for in loop (or using Object.keys(products) if your target browsers support it). Just tweak to fit your exact needs.

var products = {
    "A": [
        { "1.0.0": "FileA1.zip" },
        { "1.0.1": "FileA2.zip" }
    ],
    "B": [
        { "3.5.0": "FileB1.zip" },
        { "4.0.1": "FileB2.zip" }
    ],
    "C": [
        { "1.0.0": "FileC1.zip" },
        { "1.0.1": "FileC2.zip" }
    ]
}

edited Jun 4, 2015 at 17:56

answered Jun 4, 2015 at 16:04

Benjamin Solum

2,34119 silver badges31 bronze badges

2 Comments

Laurent S. Over a year ago

You have extra commas after last array item item, that's bad syntax.

Benjamin Solum Over a year ago

Yep, Copy+Paste. Removed. Thanks.

Laurent S. · Accepted Answer · 2015-06-04 16:31:40Z

0

Your arrays are actually objects. What I don't understand is why you don't map all things together in your javascript object from your dataset directly, cause indeed with your second "array" you loose all trace of products, which can't be retrieved as you don't have a standard structure.

Your Javascript object structure could look something like :

var ProductNameMap = {
        "ProductA":[{"version":"1.0.0","fileName":"FileA1.zip"},{"version":"1.0.1","fileName":"FileA2.zip"}],
        "ProductB":[{"version":"3.5.0","fileName":"FileB1.zip"},{"version":"4.0.1","fileName":"FileB2.zip"}], 
        "ProductC":[{"version":"1.0.0","fileName":"FileC1.zip"},{"version":"1.0.1","fileName":"FileC2.zip"}]   
};

Other structures are possible depending on your needs of course, but without the context it's hard to point one as the best one... Basically if you need collection to be ordered (like succession of versions) you will need to use an array and for a collection where the order doesn't matter, an object is fine.

edited Jun 4, 2015 at 16:31

answered Jun 4, 2015 at 16:02

Laurent S.

6,9373 gold badges32 silver badges42 bronze badges

2 Comments

Jill448 Over a year ago

Thanks for the answer. And I am sorry for not making the context clear. When the user selects productA in 1st dropbox, I want to populate the versions dynamically in 2nd dropbox. When he selects version, I want to populate respective files for that specific version of the product. Can you help in achieving that using this above mentioned array?

Laurent S. Over a year ago

This data structure would definitely be the best for what you're trying to achieve, the one from benjamin solum is the same with syntax errors (extra commas after last array item) and the others proposed won't preserve order. From there you should already try to code something if you wish to get any help in here as I won't code this for you...

Collectives™ on Stack Overflow

javascript : mapping same key to different arrays

4 Answers 4

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related