How to create dictionary and add key–value pairs dynamically?
JavascriptDictionaryKey ValueJavascript Problem Overview
From post:
I’m trying to do this same thing as that post. The only issue is that I don’t know what the keys and the values are upfront. So I need to be able to dynamically add the key and value pairs and I don’t know how to do that.
Does anyone know how to create that object and add key value pairs dynamically?
I’ve tried:
var vars = [{key:"key", value:"value"}];
vars[0].key = "newkey";
vars[0].value = "newvalue";
But that doesn’t work.
Javascript Solutions
Solution 1 - Javascript
var dict = []; // create an empty array
dict.push({
key: "keyName",
value: "the value"
});
// repeat this last part as needed to add more key/value pairs
Basically, you're creating an object literal with 2 properties (called key and value) and inserting it (using push()) into the array.
Edit: So almost 5 years later, this answer is getting downvotes because it's not creating an "normal" JS object literal (aka map, aka hash, aka dictionary).
It is however creating the structure that OP asked for (and which is illustrated in the other question linked to), which is an array of object literals, each with key and value properties. Don't ask me why that structure was required, but it's the one that was asked for.
But, but, if what you want in a plain JS object - and not the structure OP asked for - see tcll's answer, though the bracket notation is a bit cumbersome if you just have simple keys that are valid JS names. You can just do this:
// object literal with properties
var dict = {
key1: "value1",
key2: "value2"
// etc.
};
Or use regular dot-notation to set properties after creating an object:
// empty object literal with properties added afterward
var dict = {};
dict.key1 = "value1";
dict.key2 = "value2";
// etc.
You do want the bracket notation if you've got keys that have spaces in them, special characters, or things like that. E.g:
var dict = {};
// this obviously won't work
dict.some invalid key (for multiple reasons) = "value1";
// but this will
dict["some invalid key (for multiple reasons)"] = "value1";
You also want bracket notation if your keys are dynamic:
dict[firstName + " " + lastName] = "some value";
Note that keys (property names) are always strings, and non-string values will be coerced to a string when used as a key. E.g. a Date object gets converted to its string representation:
dict[new Date] = "today's value";
console.log(dict);
// => {
// "Sat Nov 04 2016 16:15:31 GMT-0700 (PDT)": "today's value"
// }
Note however that this doesn't necessarily "just work", as many objects will have a string representation like "[object Object]" which doesn't make for a non-unique key. So be wary of something like:
var objA = { a: 23 },
objB = { b: 42 };
dict[objA] = "value for objA";
dict[objB] = "value for objB";
console.log(dict);
// => { "[object Object]": "value for objB" }
Despite objA and objB being completely different and unique elements, they both have the same basic string representation: "[object Object]".
The reason Date doesn't behave like this is that the Date prototype has a custom toString method which overrides the default string representation. And you can do the same:
// a simple constructor with a toString prototypal method
function Foo() {
this.myRandomNumber = Math.random() * 1000 | 0;
}
Foo.prototype.toString = function () {
return "Foo instance #" + this.myRandomNumber;
};
dict[new Foo] = "some value";
console.log(dict);
// => {
// "Foo instance #712": "some value"
// }
(Note that since the above uses a random number, name collisions can still occur very easily. It's just to illustrate an implementation of toString.)
So when trying to use objects as keys, JS will use the object's own toString implementation, if any, or use the default string representation.
Solution 2 - Javascript
var dict = {};
dict['key'] = "testing";
console.log(dict);
works just like python :)
console output:
Object {key: "testing"}
Solution 3 - Javascript
Its as simple as:
var blah = {}; // make a new dictionary (empty)
or
var blah = {key: value, key2: value2}; // make a new dictionary with two pairs
then
blah.key3 = value3; // add a new key/value pair
blah.key2; // returns value2
blah['key2']; // also returns value2
Solution 4 - Javascript
Since you've stated that you want a dictionary object (and not an array like I assume some understood) I think this is what you are after:
var input = [{key:"key1", value:"value1"},{key:"key2", value:"value2"}];
var result = {};
for(var i = 0; i < input.length; i++)
{
result[input[i].key] = input[i].value;
}
console.log(result); // Just for testing
Solution 5 - Javascript
JavaScript's Object is in itself like a dictionary. No need to reinvent the wheel.
var dict = {};
// Adding key-value -pairs
dict['key'] = 'value'; // Through indexer
dict.anotherKey = 'anotherValue'; // Through assignment
// Looping through
for (var item in dict) {
console.log('key:' + item + ' value:' + dict[item]);
// Output
// key:key value:value
// key:anotherKey value:anotherValue
}
// Non existent key
console.log(dict.notExist); // undefined
// Contains key?
if (dict.hasOwnProperty('key')) {
// Remove item
delete dict.key;
}
// Looping through
for (var item in dict) {
console.log('key:' + item + ' value:' + dict[item]);
// Output
// key:anotherKey value:anotherValue
}
Solution 6 - Javascript
You can use maps with Map, like this:
var sayings = new Map();
sayings.set('dog', 'woof');
sayings.set('cat', 'meow');
Solution 7 - Javascript
With ES6, you can do this:
let cake = '🍰';
let pan = {
[cake]: '🥞',
};
// Output -> { '🍰': '🥞' }
Old Way (vanilla js)
let cake = '🍰';
let pan = {};
pan[cake] = '🥞';
// Output -> { '🍰': '🥞' }
Solution 8 - Javascript
I happened to walk across this question looking for something similar. It gave me enough info to run a test to get the answer I wanted. So if anyone else wants to know how to dynamically add to or lookup a {key: 'value'} pair in a JavaScript object, this test should tell you all you might need to know.
var dictionary = {initialkey: 'initialValue'};
var key = 'something';
var key2 = 'somethingElse';
var value = 'value1';
var value2 = 'value2';
var keyInitial = 'initialkey';
console.log(dictionary[keyInitial]);
dictionary[key] =value;
dictionary[key2] = value2;
console.log(dictionary);
output
initialValue
{ initialkey: 'initialValue',
something: 'value1',
somethingElse: 'value2' }
Solution 9 - Javascript
var dictionary = {};//create new object
dictionary["key1"] = value1;//set key1
var key1 = dictionary["key1"];//get key1
Solution 10 - Javascript
In modern javascript (ES6/ES2015), one should use Map data structure for dictionary. The Map data structure in ES6 lets you use arbitrary values as keys.
const map = new Map();
map.set("true", 1);
map.set("false", 0);
In you are still using ES5, the correct way to create dictionary is to create object without a prototype in the following way.
var map = Object.create(null);
map["true"]= 1;
map["false"]= 0;
There are many advantages of creating a dictionary without a prototype object. Below blogs are worth reading on this topic.
Solution 11 - Javascript
> First Initialise Array Globally
var dict = []
> Add Object into Dictionary
dict.push(
{ key: "One",value: false},
{ key: "Two",value: false},
{ key: "Three",value: false});
Output :
[0: {key: "One", value: false}
1: {key: "Two", value: false}
2: {key: "Three", value: false}]
> Update Object from Dictionary
>
Object.keys(dict).map((index) => {
if (index == 1){
dict[index].value = true
}
});
Output :
[0: {key: "One", value: false},
1: {key: "Two", value: true},
2: {key: "Three", value: false}]
> Delete Object from Dictionary
Object.keys(dict).map((index) => {
if (index == 2){
dict.splice(index)
}
});
Output :
[0: {key: "One", value: false},
1: {key: "Two", value: true}]
Solution 12 - Javascript
You could create a class Dictionary so you can interact with the Dictionary list easily:
class Dictionary {
constructor() {
this.items = {};
}
has(key) {
return key in this.items;
}
set(key,value) {
this.items[key] = value;
}
delete(key) {
if( this.has(key) ){
delete this.items[key]
return true;
}
return false;
}
}
var d = new Dictionary();
d.set(1, "value1")
d.set(2, "value2")
d.set(3, "value3")
console.log(d.has(2));
d.delete(2);
console.log(d.has(2));
Solution 13 - Javascript
An improvement on var dict = {} is to use var dict = Object.create(null).
This will create an empty object that does not have Object.prototype as it's prototype.
var dict1 = {};
if (dict1["toString"]){
console.log("Hey, I didn't put that there!")
}
var dict2 = Object.create(null);
if (dict2["toString"]){
console.log("This line won't run :)")
}
Solution 14 - Javascript
how about the one liner for creating a key value pair?
let result = { ["foo"]: "some value" };
and some iterator function like reduce to dynamically convert an array to a dictionary
var options = [
{ key: "foo", value: 1 },
{ key: "bar", value: {id: 2, name: "two"} },
{ key: "baz", value: {["active"]: true} },
];
var result = options.reduce((accumulator, current) => {
accumulator[current.key] = current.value;
return accumulator;
}, {});
console.log(result);
Solution 15 - Javascript
I ran into this problem.. but within a for loop. The top solution did not work (when using variables (and not strings) for the parameters of the push function), and the others did not account for key values based on variables. I was surprised this approach (which is common in php) worked..
// example dict/json
var iterateDict = {'record_identifier': {'content':'Some content','title':'Title of my Record'},
'record_identifier_2': {'content':'Some different content','title':'Title of my another Record'} };
var array = [];
// key to reduce the 'record' to
var reduceKey = 'title';
for(key in iterateDict)
// ultra-safe variable checking...
if(iterateDict[key] !== undefined && iterateDict[key][reduceKey] !== undefined)
// build element to new array key
array[key]=iterateDict[key][reduceKey];
Solution 16 - Javascript
In case if someone needs to create a dictionary object dynamically you can use the following code snippet
let vars = [{key:"key", value:"value"},{key:"key2", value:"value2"}];
let dict={}
vars.map(varItem=>{
dict[varItem.key]=varItem.value
})
console.log(dict)
Solution 17 - Javascript
You can initialize the dictionary like
var vars = {
"key1": "Search",
"key2": "View"
};
and access it like
console.log(vars["key1"]);