CODEWITHSUNDEEP
javascriptjqueryarrays
Lalitkumar.annaldas
Lalitkumar.annaldas

Reputation: 216

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

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?

Upvotes: 1

Views: 1766

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 2

Shilly
Shilly

Reputation: 8589

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>

Upvotes: 0

user694368
user694368

Reputation:

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"]

Upvotes: 0

Related Questions