generate and access a 2d-array with key-value pair using javascript only

Question

I want to create an array like:

var fruits[ ]=[ [1] ["Grapes","mango","orange"] , [2] ["banana"], [A] ["Avocado","Apple"] , [P] ["Pear","Papaya","pomegranate","plum"] ];

And accordingly I want to access the above array using key value pairing or something like that.

For example, if I have a dropdown with values:

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="A">A</option>
  <option value="P">P</option>
</select>

Depending upon my selection, it should display the respective values using a for loop like if I select option "A" then using the for loop it should display the values corresponding to option A ie. Avocado Apple.

How can I achieve this?

Seems you need a switch..case instead of a for loop ... check : w3schools.com/js/js_switch.asp — Exception_al
– Exception_al, Commented Jan 23, 2017 at 12:35
Thanks for your suggestions..but the scenario is that the array is coming from database and it is dynamic..so it can have any value..so cant use switch case.. — Lalitkumar.annaldas
– Lalitkumar.annaldas, Commented Jan 23, 2017 at 12:37
If you ned keys, you're better of using an object containing arrays, so you can mix numbers and letters as keys: var fruits = {"1" : ["Grapes","mango","orange"], "2" : ["banana"], "A" : ["Avocado","Apple"], "P" : ["Pear","Papaya","pomegranate","plum"]} Then you can loop over the keys and use that key to get the array op options you want to use. — Shilly
– Shilly, Commented Jan 23, 2017 at 12:41
<option> values will be the key...and i can get that into a variable using javascript or jquery..but what to do after that...how to access the corresponding values of that particular key... — Lalitkumar.annaldas
– Lalitkumar.annaldas, Commented Jan 23, 2017 at 12:41

Nenad Vracar · Accepted Answer · 2017-01-23 12:52:24Z

2

You can use object instead of array and bind change event on select and then use for loop.

var fruits = {
  1: ["Grapes", "mango", "orange"],
  2: ["banana"],
  A: ["Avocado", "Apple"],
  P: ["Pear", "Papaya", "pomegranate", "plum"]
}

$('select').change(function() {
  var val = $(this).val();
  if (fruits[val]) {
    for (var i = 0; i < fruits[val].length; i++) {
      console.log(fruits[val][i])
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="A">A</option>
  <option value="P">P</option>
</select>

edited Jan 23, 2017 at 12:52

answered Jan 23, 2017 at 12:45

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

3 Comments

Lalitkumar.annaldas Over a year ago

can we access them with for loop only without for each loop...bcoz i also want the length of it...like number of values..

Nenad Vracar Over a year ago

To get length you can just use console.log(fruits[val].length)

Lalitkumar.annaldas Over a year ago

thanks...but according to requirement i need for loop instead of for each...bcoz i m working on a part of code which is dynamic and have few modifications in between...

user694368 · Accepted Answer · 2017-01-23 12:41:49Z

0

It seems like you want to give arbitrary indexes to array of elements. In that case your fruits can be a plain object, rather than being an array.

var fruits = {
    1: ["Grapes", "mango", "orange"],   
    2: ["banana"],
    'A': ["avacado", "apple"],
    'P': ["Pear", "Papaya"]
}

You can access them any category as follows;

fruit[1];    // ["Grapes", "mango", "orange"]
fruit['A'];  // ["avacado", "apple"]

answered Jan 23, 2017 at 12:41

user694368

2 Comments

Lalitkumar.annaldas Over a year ago

so how to access and display the names using for loop

user694368 Over a year ago

@Lalitkumar.annaldas You can check the whole system demo here: jsfiddle.net/8jq52em3

Shilly · Accepted Answer · 2017-01-23 12:49:58Z

0

How I would've solved it with an object:

<html>
<head></head>
<body>
    <div id="wrapper-select"></div>
<script>
var select,
    keyToUse = "A",
    fruits = {
        "1" : ["Grapes","mango","orange"],
        "2" : ["banana"],
        "A" : ["Avocado","Apple"],
        "P" : ["Pear","Papaya","pomegranate","plum"]
    },
    createOption = function createOption( text ) {
        var option = document.createElement('option');
        option.value = text;
        option.textContent = text;
        return option;
    };
// Select the fruits array we want to use.
// Then loop over it, appending a new option element to our select element.
select = fruits[keyToUse].reduce(function( select, fruitName ) {
    select.appendChild(createOption(fruitName));
    return select;
}, document.createElement('select') );
// Append the newly created select.
document.querySelector('#wrapper-select').appendChild(select);
</script>
</body>
</html>

answered Jan 23, 2017 at 12:49

Shilly

8,5991 gold badge21 silver badges24 bronze badges

1 Comment

Lalitkumar.annaldas Over a year ago

thanks ..but i already have the select dropdown ready..it is coming from backend using json...so need not to worry...

Collectives™ on Stack Overflow

generate and access a 2d-array with key-value pair using javascript only

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related