How to get a value from keyvalue pair list?

Question

I am trying to understand the concept of KeyValue pair list in JavaScript.

Do I have to use an array? I tried adding this data to an array:

key: 1, value: "apple"
key: 2, value: "banana"
key: 7, value: "cherry"
key: 24, value: "grapes"

But how do I get the value of key 7 without using loop?

I create JSFiddle with an example. How can I edit this example to return me the value of the key? At the moment it is returning a value of the first entered keyValue pair.

JSFiddle

Answer 1

Don't make your “dict” a list of key/value pairs. Instead, use an object which gives you all the functionality automatically:

var dict = {}; // object literal

function addToList() {
    var aKey = document.getElementById("fkey").value;
    var aValue = document.getElementById("fvalue").value;
    dict[aKey] = aValue;
}

function getFromList() {
    var aKey = document.getElementById("rkey").value;
    document.getElementById("rvalue").value = dict[aKey];
}

Answer 2

You are using a an array of Javascript objects in JSON format. But it is more convenient in Javascript to use just an object in JSON format.

var fruits = {
  "1": "apple",
  "2": "banana",
  "7": "cherry"
  "24": "grapes"
};

So it is also much easier to access the values:

fruits["7"]

Additionally you do not have to manage the uniqueness of the keys on your own. If you put a value with the same key, the old value will be overwritten:

fruits["7"] = "strawberry";

Answer 3

You can learn more about JavaScript's Object from below links:

JavaScript-objects-in-detail

MDN JavaScript Object

Eg:

var fruits = {
    "1": "apple",
    "2": "banana",
    "7": "cherry",
    "24": "grapes",
};

To access any key Eg: fruits[1] , Output: apple

 var fruits = {
        "apple": "1",
        "banana": "2",
        "cherry": "7",
        "grapes": "24",
    };

to access any key Eg: fruits.apple , Output: 1

Answer 4

In your example, you are not using a json object with key, value , which means you can't get the value of a key from your dict array like this :

dict.value;

you need to look for the index of a specific key to get the value, like this :

function getValue (key) { 
   for (var index in dict) { 
      if(dict[index].key == key ) { 
          return dict[index].value;
      }
   }

   return 'Not Found';
}

check jsFiddle

Answer 5

Check out this plugin/gist from KnightCoder

Following is actual source code of this plugin.

/*
 * DictionaryKnight v1.0 - A very simple teeny-tiny dictionary class.
 * * @ Developer : https://github.com/KnightCoder 
 * * * You can add an item into the dictionary
 * * * You can even directly add a collection of items
 * * * You can get length of the items in the dictionary
 * * * You can easily parse and get the items in the dictionary 
 * * * Very small, fast and efficient
 */

var DictionaryKnight = function () { };
DictionaryKnight.prototype = {
    getLength: function () { return Object.keys(this).length },
    add: function (key, value) {
        this[key] = value;
        return this;
    },
    addCollection: function (arr) {
        for (var i = 0; i < arr.length; i++) {
            this.add(arr[i][0], arr[i][1]);
        }
        return this;
    }
}

It has a tiny Dictionary functionality in it.

You can use it like this:

var dict = new DictionaryKnight();
dict.add("en", { "language": "English", "country": "Great Britain", "sample": "This is english" });
dict.add("hi", { "language": "Hindi", "country": "India", "sample": "यह हिन्दी है" });

var arr = [];
arr.push(["es", { "language": "Spanish", "country": "Spain", "sample": "Esto es español" }]);
arr.push(["cn", { "language": "Chinese", "country": "China", "sample": "这是中国" }]);
dict.addCollection(arr);

console.log("Total data : " + dict.getLength());
for (var i = 0; i < Object.keys(dict).length; i++) {
    console.log(Object.keys(dict)[i]);
    console.log(dict[Object.keys(dict)[i]]);
    console.log("-----");
}

In the first method you can insert data in key-value format and in the second method you can add a collection of data in a 2-dimensional array format. You can also use both the methods together in combination like shown in the example above.