Here is my object literal:
var obj = {key1: value1, key2: value2};
How can I add field key3 with value3 to the object?
There are two ways to add new properties to an object:
var obj = {
key1: value1,
key2: value2
};
Using dot notation:
obj.key3 = "value3";
Using square bracket notation:
obj["key3"] = "value3";
The first form is used when you know the name of the property. The second form is used when the name of the property is dynamically determined. Like in this example:
var getProperty = function (propertyName) {
return obj[propertyName];
};
getProperty("key1");
getProperty("key2");
getProperty("key3");
A real JavaScript array can be constructed using either:
The Array literal notation:
var arr = [];
The Array constructor notation:
var arr = new Array();
Year 2017 answer: Object.assign()
Object.assign(dest, src1, src2, ...) merges objects.
It overwrites dest with properties and values of (however many) source objects, then returns dest.
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
Live example
var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});
document.body.innerHTML = JSON.stringify(obj);
Year 2018 answer: object spread operator {...}
obj = {...obj, ...pair, scalar};
From MDN:
It copies own enumerable properties from a provided object onto a new object.
Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().
Note that Object.assign() triggers setters whereas spread syntax doesn’t.
Live example
It works in current Chrome and current Firefox. They say it doesn’t work in current Edge.
var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
var scalar = "value4"
obj = {...obj, ...pair, scalar};
document.body.innerHTML = JSON.stringify(obj);
Year 2019 answer
Object assignment operator +=:
obj += {key3: "value3"};
Oops... I got carried away. Smuggling information from the future is illegal. Duly obscured!
I have grown fond of the LoDash / Underscore when writing larger projects.
Adding by obj['key'] or obj.key are all solid pure JavaScript answers. However both of LoDash and Underscore libraries do provide many additional convenient functions when working with Objects and Arrays in general.
.push() is for Arrays, not for objects.
Depending what you are looking for, there are two specific functions that may be nice to utilize and give functionality similar to the the feel of arr.push(). For more info check the docs, they have some great examples there.
_.merge (Lodash only)
The second object will overwrite or add to the base object.
undefined values are not copied.
var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}
_.extend / _.assign
The second object will overwrite or add to the base object.
undefined will be copied.
var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}
_.defaults
The second object contains defaults that will be added to base object if they don't exist.
undefined values will be copied if key already exists.
var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}
$.extend
In addition, it may be worthwhile mentioning jQuery.extend, it functions similar to _.merge and may be a better option if you already are using jQuery.
The second object will overwrite or add to the base object.
undefined values are not copied.
var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}
Object.assign()
It may be worth mentioning the ES6/ ES2015 Object.assign, it functions similar to _.merge and may be the best option if you already are using an ES6/ES2015 polyfill like Babel if you want to polyfill yourself.
The second object will overwrite or add to the base object.
undefined will be copied.
var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}
You could use either of these (provided key3 is the acutal key you want to use)
arr[ 'key3' ] = value3;
or
arr.key3 = value3;
If key3 is a variable, then you should do:
var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;
After this, requesting arr.a_key would return the value of value3, a literal 3.
Performance
Today 2020.01.14 I perform tests on MacOs HighSierra 10.13.6 on Chrome v78.0.0, Safari v13.0.4 and Firefox v71.0.0, for chosen solutions. I divide solutions to mutable (first letter M) and immutable (first letter I). I also provide few immutable solutions (IB,IC,ID/IE) not yet published in answers to this question
Conclusions
fastest mutable solutions are much faster than fastest immutable (>10x)
classic mutable approach like obj.key3 = "abc" (MA,MB) is fastest
for immutable solutions the {...obj, key3:'abc'} and Object.assign (IA,IB) are fastest
surprisingly there are immutable solutions faster than some mutable solutions for chrome (MC-IA) and safari (MD-IB)
Details
In snippet below there are presended tested solution, you can prefrom test on your machine HERE (update 2022: I send Big thanks to Josh DeLong who rewrite tests from jspref.com which stops working to jsbench.me)
var o = {
key1: true,
key2: 3,
};
var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);
function MA(obj) {
obj.key3 = "abc";
return obj;
}
function MB(obj) {
obj['key3'] = "abc";
return obj;
}
function MC(obj) {
Object.assign(obj, {key3:'abc'});
return obj;
}
function MD(obj) {
Object.defineProperty(obj, 'key3', {
value: "abc", // undefined by default
enumerable: true, // false by default
configurable: true, // false by default
writable: true // false by default
});
return obj;
}
function IA(obj) {
return {...obj, key3:'abc'};
}
function IB(obj) {
return Object.assign({key3:'abc'}, obj);
}
function IC(obj) {
let ob= JSON.parse(JSON.stringify(obj))
ob.key3 = 'abc';
return ob;
}
function ID(obj) {
let ob= Object.fromEntries(Object.entries(obj));
ob.key3 = 'abc';
return ob;
}
function IE(obj) {
return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}
log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);
This snippet only presents code - it not perform tests itself!
arr.key3 = value3;
because your arr is not really an array... It's a prototype object. The real array would be:
var arr = [{key1: value1}, {key2: value2}];
but it's still not right. It should actually be:
var arr = [{key: key1, value: value1}, {key: key2, value: value2}];
The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function’s arguments.
Now, ES2018 comes with spread properties to object literals. It copies its own enumerable properties from a provided object onto a new object.
The spread syntax is useful for combining the properties and methods on objects into a new object:
You can add property in an object like this
const obj1 = {hello: "🤪"};
const obj2 = {...obj1, laugh: "😂" };
console.log('obj1', obj1)
console.log('obj2', obj2)
You can also combine objects like this
const objectOne = {hello: "🤪"}
const objectTwo = {world: "🐻"}
const objectThree = {...objectOne, ...objectTwo, laugh: "😂"}
console.log(objectThree) // Object { hello: "🤪", world: "🐻", laugh: "😂" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("😂".repeat(5))}}
objectFour.laugh() //
var employees = [];
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});
Simply adding properties:
And we want to add prop2 : 2 to this object, these are the most convenient options:
Dot operator: object.prop2 = 2;
square brackets: object['prop2'] = 2;
So which one do we use then?
The dot operator is more clean syntax and should be used as a default (imo). However, the dot operator is not capable of adding dynamic keys to an object, which can be very useful in some cases. Here is an example:
const obj = {
prop1: 1
}
const key = Math.random() > 0.5 ? 'key1' : 'key2';
obj[key] = 'this value has a dynamic key';
console.log(obj);
Merging objects:
When we want to merge the properties of 2 objects these are the most convenient options:
Object.assign(), takes a target object as an argument, and one or more source objects and will merge them together. For example:
const object1 = {
a: 1,
b: 2,
};
const object2 = Object.assign({
c: 3,
d: 4
}, object1);
console.log(object2);
Object spread operator ...
const obj = {
prop1: 1,
prop2: 2
}
const newObj = {
...obj,
prop3: 3,
prop4: 4
}
console.log(newObj);
Which one do we use?
The spread syntax is less verbose and has should be used as a default imo. Don't forgot to transpile this syntax to syntax which is supported by all browsers because it is relatively new.
Object.assign() is more dynamic because we have access to all objects which are passed in as arguments and can manipulate them before they get assigned to the new Object.
I know there is already an accepted answer for this but I thought I'd document my idea somewhere. Please [people] feel free to poke holes in this idea, as I'm not sure if it is the best solution... but I just put this together a few minutes ago:
Object.prototype.push = function( key, value ){
this[ key ] = value;
return this;
}
You would utilize it in this way:
var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );
Since, the prototype function is returning this you can continue to chain .push's to the end of your obj variable: obj.push(...).push(...).push(...);
Another feature is that you can pass an array or another object as the value in the push function arguments. See my fiddle for a working example: http://jsfiddle.net/7tEme/
Two most used ways already mentioned in most answers
obj.key3 = "value3";
obj["key3"] = "value3";
One more way to define a property is using Object.defineProperty()
Object.defineProperty(obj, 'key3', {
value: "value3", // undefined by default
enumerable: true, // false by default
configurable: true, // false by default
writable: true // false by default
});
This method is useful when you want to have more control while defining property.
Property defined can be set as enumerable, configurable and writable by user.
You can create a class with the answer of #Ionuț G. Stan
function obj(){
obj=new Object();
this.add=function(key,value){
obj[""+key+""]=value;
}
this.obj=obj
}
Creating a new object with the last class:
my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');
Printing the object
console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}
Printing a Key
console.log(my_obj.obj["key3"]) //Return value3
I'm newbie in javascript, comments are welcome. Works for me.
We can add a key/value pair to a JavaScript object in many ways...
CASE - 1 : Expanding an object
Using this we can add multiple key: value to the object at the same time.
const rectangle = { width: 4, height: 6 };
const cube = {...rectangle, length: 7};
const cube2 = {...rectangle, length: 7, stroke: 2};
console.log("Cube2: ", cube2);
console.log("Cube: ", cube);
console.log("Rectangle: ", rectangle);
CASE - 2 : Using dot notation
var rectangle = { width: 4, height: 6 };
rectangle.length = 7;
console.log(rectangle);
CASE - 3 : Using [square] notation
var rectangle = { width: 4, height: 6 };
rectangle["length"] = 7;
console.log(rectangle);
Your example shows an Object, not an Array. In that case, the preferred way to add a field to an Object is to just assign to it, like so:
arr.key3 = value3;
A short and elegant way in next Javascript specification (candidate stage 3) is:
obj = { ... obj, ... { key3 : value3 } }
A deeper discussion can be found in Object spread vs Object.assign and on Dr. Axel Rauschmayers site.
It works already in node.js since release 8.6.0.
Vivaldi, Chrome, Opera, and Firefox in up to date releases know this feature also, but Mirosoft don't until today, neither in Internet Explorer nor in Edge.
var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
var injectObj = {isActive:true, timestamp:new Date()};
// function to inject key values in all object of json array
function injectKeyValueInArray (array, keyValues){
return new Promise((resolve, reject) => {
if (!array.length)
return resolve(array);
array.forEach((object) => {
for (let key in keyValues) {
object[key] = keyValues[key]
}
});
resolve(array);
})
};
//call function to inject json key value in all array object
injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
console.log(newArrOfObj);
});
Output like this:-
[ { name: 'eve',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: 'john',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: 'jane',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z } ]
You can either add it this way:
arr['key3'] = value3;
or this way:
arr.key3 = value3;
The answers suggesting keying into the object with the variable key3 would only work if the value of key3 was 'key3'.
In case you have multiple anonymous Object literals inside an Object and want to add another Object containing key/value pairs, do this:
Firebug' the Object:
console.log(Comicbook);
returns:
[Object { name="Spiderman", value="11"}, Object { name="Marsipulami",
value="18"}, Object { name="Garfield", value="2"}]
Code:
if (typeof Comicbook[3]=='undefined') {
private_formArray[3] = new Object();
private_formArray[3]["name"] = "Peanuts";
private_formArray[3]["value"] = "12";
}
will add Object {name="Peanuts", value="12"} to the Comicbook Object
According to Property Accessors defined in ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67), there are two ways you can do to add properties to a exists object. All these two way, the Javascript engine will treat them the same.
The first way is to use dot notation:
obj.key3 = value3;
But this way, you should use a IdentifierName after dot notation.
The second way is to use bracket notation:
obj["key3"] = value3;
and another form:
var key3 = "key3";
obj[key3] = value3;
This way, you could use a Expression (include IdentifierName) in the bracket notation.
We can do this in this way too.
var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
for (var [key, value] of myMap) {
console.log(key + ' = ' + value);
}
supported by most of browsers, and it checks if object key available or not you want to add, if available it overides existing key value and it not available it add key with value
example 1
let my_object = {};
// now i want to add something in it
my_object.red = "this is red color";
// { red : "this is red color"}
example 2
let my_object = { inside_object : { car : "maruti" }}
// now i want to add something inside object of my object
my_object.inside_object.plane = "JetKing";
// { inside_object : { car : "maruti" , plane : "JetKing"} }
example 3
let my_object = { inside_object : { name : "abhishek" }}
// now i want to add something inside object with new keys birth , gender
my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";
// { inside_object :
// { name : "abhishek",
// birth : "8 Aug",
// gender : "Male"
// }
// }
You can create a new object by using the {[key]: value} syntax:
const foo = {
a: 'key',
b: 'value'
}
const bar = {
[foo.a]: foo.b
}
console.log(bar); // {key: 'value'}
console.log(bar.key); // value
const baz = {
['key2']: 'value2'
}
console.log(baz); // {key2: 'value2'}
console.log(baz.key2); // value2
With the previous syntax you can now use the spread syntax {...foo, ...bar} to add a new object without mutating your old value:
const foo = {a: 1, b: 2};
const bar = {...foo, ...{['c']: 3}};
console.log(bar); // {a: 1, b: 2, c: 3}
console.log(bar.c); // 3
Either obj['key3'] = value3 or obj.key3 = value3 will add the new pair to the obj.
However, I know jQuery was not mentioned, but if you're using it, you can add the object through $.extend(obj,{key3: 'value3'}). E.g.:
var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));
$.extend(obj,{key3: 'value3'});
$('#ext').append(JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>
jQuery.extend(target[,object1][,objectN]) merges the contents of two or more objects together into the first object.
And it also allows recursive adds/modifications with $.extend(true,object1,object2);:
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$("#ini").append(JSON.stringify(object1));
$.extend( true, object1, object2 );
$("#ext").append(JSON.stringify(object1));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>
Since its a question of the past but the problem of present. Would suggest one more solution: Just pass the key and values to the function and you will get a map object.
var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}
In order to prepend a key-value pair to an object so the for in works with that element first do this:
var nwrow = {'newkey': 'value' };
for(var column in row){
nwrow[column] = row[column];
}
row = nwrow;
Best way to achieve same is stated below:
function getKey(key) {
return `${key}`;
}
var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};
//console.log(obj);
Related
If I have a JS object like:
var foo = { 'bar' : 'baz' }
If I know that foo has that basic key/value structure, but don't know the name of the key, How can I get it? for ... in? $.each()?
You would iterate inside the object with a for loop:
for(var i in foo){
alert(i); // alerts key
alert(foo[i]); //alerts key's value
}
Or
Object.keys(foo)
.forEach(function eachKey(key) {
alert(key); // alerts key
alert(foo[key]); // alerts value
});
You can access each key individually without iterating as in:
var obj = { first: 'someVal', second: 'otherVal' };
alert(Object.keys(obj)[0]); // returns first
alert(Object.keys(obj)[1]); // returns second
If you want to get all keys, ECMAScript 5 introduced Object.keys. This is only supported by newer browsers but the MDC documentation provides an alternative implementation (which also uses for...in btw):
if(!Object.keys) Object.keys = function(o){
if (o !== Object(o))
throw new TypeError('Object.keys called on non-object');
var ret=[],p;
for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
return ret;
}
Of course if you want both, key and value, then for...in is the only reasonable solution.
Given your Object:
var foo = { 'bar' : 'baz' }
To get bar, use:
Object.keys(foo)[0]
To get baz, use:
foo[Object.keys(foo)[0]]
Assuming a single object
This is the simplest and easy way. This is how we do this.
var obj = { 'bar' : 'baz' }
var key = Object.keys(obj)[0];
var value = obj[key];
console.log("key = ", key) // bar
console.log("value = ", value) // baz
Object.keys() is javascript method which return an array of keys when using on objects.
Object.keys(obj) // ['bar']
Now you can iterate on the objects and can access values like below-
Object.keys(obj).forEach( function(key) {
console.log(obj[key]) // baz
})
A one liner for you:
const OBJECT = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
'key4': 'value4'
};
const value = 'value2';
const key = Object.keys(OBJECT)[Object.values(OBJECT).indexOf(value)];
window.console.log(key); // = key2
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
Refer MDN
I was having the same problem and this is what worked
//example of an Object
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
//How to access a single key or value
var key = Object.keys(person)[0];
var value = person[key];
best way to get key/value of object.
let obj = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
'key4': 'value4'
}
Object.keys(obj).map(function(k){
console.log("key with value: "+k +" = "+obj[k])
})
I don't see anything else than for (var key in foo).
Since you mentioned $.each(), here's a handy approach that would work in jQuery 1.6+:
var foo = { key1: 'bar', key2: 'baz' };
// keys will be: ['key1', 'key2']
var keys = $.map(foo, function(item, key) {
return key;
});
The easiest way is to just use Underscore.js:
keys
_.keys(object)
Retrieve all the names of the object's properties.
_.keys({one : 1, two : 2, three : 3});
=> ["one", "two", "three"]
Yes, you need an extra library, but it's so easy!
use for each loop for accessing keys in Object or Maps in javascript
for(key in foo){
console.log(key);//for key name in your case it will be bar
console.log(foo[key]);// for key value in your case it will be baz
}
Note: you can also use
Object.keys(foo);
it will give you like this
output:
[bar];
Object.keys()
The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
var arr1 = Object.keys(obj);
Object.values()
The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
var arr2 = Object.values(obj);
For more please go here
There is no way other than for ... in. If you don't want to use that (parhaps because it's marginally inefficient to have to test hasOwnProperty on each iteration?) then use a different construct, e.g. an array of kvp's:
[{ key: 'key', value: 'value'}, ...]
Well $.each is a library construct, whereas for ... in is native js, which should be better
You can use Object.keys functionality to get the keys like:
const tempObjects={foo:"bar"}
Object.keys(tempObjects).forEach(obj=>{
console.log("Key->"+obj+ "value->"+tempObjects[obj]);
});
for showing as a string, simply use:
console.log("they are: " + JSON.stringify(foo));
If you are using AWS CloudFront Functions then this would work for you.
function handler(event) {
var response = event.response;
var headers = response.headers;
if("x-amz-meta-csp-hash" in headers){
hash=headers["x-amz-meta-csp-hash"].value;
console.log('hash is ' + hash);
}
}
Readable and simple solution:
const object1 = {
first: 'I am first',
second: 'I am second'
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// expected output:
// "first: I am first"
// "second: I am second"
I'm struggling with an operation I can't achieve, I have a number of arrays like these:
['key1', 'key2', 'key3']
['key1', 'key2', 'key4']
['key1', 'key5']
For each of this array there is a corresponding value:
value1
value2
value3
I want to create an empty object from each array, that has an hierarchy based on the keys position in the array, for example:
['key1', 'key2', 'key3'] => { key1: { key2: { key3: value1 } } }
And at the end, merge these objects and build an object that is as this:
var object = {
key1: {
key2: {
key3: value1,
key4: value2
},
key5: value3
}
}
I tried some approaches but they require three for loops iterations and I think there is a better way for doing this, of course the merge at the end is the easiest part, I can just user the jQuery merge to do so, but I'm really struggling on create the single object from each array.
Thank you very much, if you need any more information let me know.
Cheers
You could use Array#reduce, because this returns the object you need, without keeping a reference outside.
function set(object, path, value) {
var last = path.pop();
path.reduce(function (o, k) {
return o[k] = o[k] || {};
}, object)[last] = value;
}
var a = {};
set(a, ['key1', 'key2', 'key3'], 'value1');
set(a, ['key1', 'key2', 'key4'], 'value2');
set(a, ['key1', 'key5'], 'value3');
console.log(a);
function create(arr, value, o = {}) {
a = o;
// loop trough the object
for (i = 0; i < arr.length; i++) {
// add a new object with the name of an array object
a[arr[i]] = {};
// important step: move the pointer `a` deeper into the object...
a = a[arr[i]];
}
// set the last object's value to the passed value
a.value = value;
return o;
}
Use like this:
var object = create(["a", "b", "c"], true);
object2 = create(["d", "e", "f"], true, object);
This question already has answers here:
How to deeply merge two object values by keys
(5 answers)
How can I merge properties of two JavaScript objects dynamically?
(69 answers)
Closed 6 years ago.
I have two json objects obj1 and obj2, i want to merge them and crete a single json object.
The resultant json should have all the values from obj2 and the values from obj1 which is not present in obj2.
Question:
var obj1 = {
"name":"manu",
"age":23,
"occupation":"SE"
}
var obj2 = {
"name":"manu",
"age":23,
"country":"india"
}
Expected:
var result = {
"name":"manu",
"age":23,
"occupation":"SE",
"country":"india"
}
There are couple of different solutions to achieve this:
1 - Native javascript for-in loop:
const result = {};
let key;
for (key in obj1) {
if(obj1.hasOwnProperty(key)){
result[key] = obj1[key];
}
}
for (key in obj2) {
if(obj2.hasOwnProperty(key)){
result[key] = obj2[key];
}
}
2 - Object.keys():
const result = {};
Object.keys(obj1)
.forEach(key => result[key] = obj1[key]);
Object.keys(obj2)
.forEach(key => result[key] = obj2[key]);
3 - Object.assign():
(Browser compatibility: Chrome: 45, Firefox (Gecko): 34, Internet Explorer: No support, Edge: (Yes), Opera: 32, Safari: 9)
const result = Object.assign({}, obj1, obj2);
4 - Spread Operator:
Standardised from ECMAScript 2015 (6th Edition, ECMA-262):
Defined in several sections of the specification: Array Initializer, Argument Lists
Using this new syntax you could join/merge different objects into one object like this:
const result = {
...obj1,
...obj2,
};
5 - jQuery.extend(target, obj1, obj2):
Merge the contents of two or more objects together into the first object.
const target = {};
$.extend(target, obj1, obj2);
6 - jQuery.extend(true, target, obj1, obj2):
Run a deep merge of the contents of two or more objects together into the target. Passing false for the first argument is not supported.
const target = {};
$.extend(true, target, obj1, obj2);
7 - Lodash _.assignIn(object, [sources]): also named as _.extend:
const result = {};
_.assignIn(result, obj1, obj2);
8 - Lodash _.merge(object, [sources]):
const result = _.merge(obj1, obj2);
There are a couple of important differences between lodash's merge function and Object.assign:
1- Although they both receive any number of objects but lodash's merge apply a deep merge of those objects but Object.assign only merges the first level. For instance:
_.isEqual(_.merge({
x: {
y: { key1: 'value1' },
},
}, {
x: {
y: { key2: 'value2' },
},
}), {
x: {
y: {
key1: 'value1',
key2: 'value2',
},
},
}); // true
BUT:
const result = Object.assign({
x: {
y: { key1: 'value1' },
},
}, {
x: {
y: { key2: 'value2' },
},
});
_.isEqual(result, {
x: {
y: {
key1: 'value1',
key2: 'value2',
},
},
}); // false
// AND
_.isEqual(result, {
x: {
y: {
key2: 'value2',
},
},
}); // true
2- Another difference has to do with how Object.assign and _.merge interpret the undefined value:
_.isEqual(_.merge({x: 1}, {x: undefined}), { x: 1 }) // false
BUT:
_.isEqual(Object.assign({x: 1}, {x: undefined}), { x: undefined })// true
Update 1:
When using for in loop in JavaScript, we should be aware of our environment specially the possible prototype changes in the JavaScript types. For instance some of the older JavaScript libraries add new stuff to Array.prototype or even Object.prototype.
To safeguard your iterations over from the added stuff we could use object.hasOwnProperty(key) to mke sure the key is actually part of the object you are iterating over.
Update 2:
I updated my answer and added the solution number 4, which is a new JavaScript feature but not completely standardized yet. I am using it with Babeljs which is a compiler for writing next generation JavaScript.
Update 3:
I added the difference between Object.assign and _.merge.
WORKING FIDDLE
Simplest Way with Jquery -
var finalObj = $.extend(obj1, obj2);
Without Jquery -
var finalobj={};
for(var _obj in obj1) finalobj[_obj ]=obj1[_obj];
for(var _obj in obj2) finalobj[_obj ]=obj2[_obj];
1)
var merged = {};
for(key in obj1)
merged[key] = obj1[key];
for(key in obj2)
merged[key] = obj2[key];
2)
var merged = {};
Object.keys(obj1).forEach(k => merged[k] = obj1[k]);
Object.keys(obj2).forEach(k => merged[k] = obj2[k]);
OR
Object.keys(obj1)
.concat(Object.keys(obj2))
.forEach(k => merged[k] = k in obj2 ? obj2[k] : obj1[k]);
3) Simplest way:
var merged = {};
Object.assign(merged, obj1, obj2);
Just another solution using underscore.js:
_.extend({}, obj1, obj2);
I've used this function to merge objects in the past, I use it to add or update existing properties on obj1 with values from obj2:
var _mergeRecursive = function(obj1, obj2) {
//iterate over all the properties in the object which is being consumed
for (var p in obj2) {
// Property in destination object set; update its value.
if ( obj2.hasOwnProperty(p) && typeof obj1[p] !== "undefined" ) {
_mergeRecursive(obj1[p], obj2[p]);
} else {
//We don't have that level in the heirarchy so add it
obj1[p] = obj2[p];
}
}
}
It will handle multiple levels of hierarchy as well as single level objects. I used it as part of a utility library for manipulating JSON objects. You can find it here.
This simple function recursively merges JSON objects, please notice that this function merges all JSON into first param (target), if you need new object modify this code.
var mergeJSON = function (target, add) {
function isObject(obj) {
if (typeof obj == "object") {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
return true; // search for first object prop
}
}
}
return false;
}
for (var key in add) {
if (add.hasOwnProperty(key)) {
if (target[key] && isObject(target[key]) && isObject(add[key])) {
this.mergeJSON(target[key], add[key]);
} else {
target[key] = add[key];
}
}
}
return target;
};
BTW instead of isObject() function may be used condition like this:
JSON.stringify(add[key])[0] == "{"
but this is not good solution, because it's will take a lot of resources if we have large JSON objects.
If I attach an additional property to an object, does it have to go at the end, or can I put it at a specified position.
function reassign(obj){
delete obj.c;
obj.c = "new three";
var t = "<table border=\"1\">";
for (var i in obj){
t += "<tr><td>" + obj[i] + "</td></tr>";
}
t += "</table>";
return t;
}
var obj = {
a : "one",
b : "two",
c : "three",
d : "four"
};
var reassigned = reassign(obj);
document.write(reassigned);
Would it be possible somehow to put the new obj.c in the third position again after it's been deleted, rather than having it appended to the end? Of course I could skip the delete part. But even without that, I could also for example intend inject alphabeta: "one point five" into the second position. Is it possible? Thanks!
jsbin
Array elements are ordered; object properties are not. You should never assume that object properties will be iterated in a particular order.
If order is important to you, create a new order:[] property which contains an array of property names, and you can iterate through that:
var obj = {
a : "one",
b : "two",
c : "three",
d : "four",
order : ['a','b','c','d']
};
Objects are unordered. You can either create an Array and break your object into Key-Value pairs or you can use an array to index object keys.
Option 1
var collection = [
{key1: value1},
{key2: value2},
{key3: value3}
];
Option 2
var obj = {
key1: value1,
key2: value2,
key3: value3
};
// you can index just the values
var index_to_value = [
obj['key1'],
obj['key2'],
obj['key3']
];
// or you can index by key, if necessary
var index_to_key = [
'key1', 'key2', 'key3'
];
And of course, if it doesn't interfere, you can put the index in the object:
var obj = {
key1: value1,
key2: value2,
key3: value3,
_index: [
'key1', 'key2', 'key3'
]
};
And, I'd recommend either using sort and a compare function or splicing to manage the index.
If I have a JS object like:
var foo = { 'bar' : 'baz' }
If I know that foo has that basic key/value structure, but don't know the name of the key, How can I get it? for ... in? $.each()?
You would iterate inside the object with a for loop:
for(var i in foo){
alert(i); // alerts key
alert(foo[i]); //alerts key's value
}
Or
Object.keys(foo)
.forEach(function eachKey(key) {
alert(key); // alerts key
alert(foo[key]); // alerts value
});
You can access each key individually without iterating as in:
var obj = { first: 'someVal', second: 'otherVal' };
alert(Object.keys(obj)[0]); // returns first
alert(Object.keys(obj)[1]); // returns second
If you want to get all keys, ECMAScript 5 introduced Object.keys. This is only supported by newer browsers but the MDC documentation provides an alternative implementation (which also uses for...in btw):
if(!Object.keys) Object.keys = function(o){
if (o !== Object(o))
throw new TypeError('Object.keys called on non-object');
var ret=[],p;
for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
return ret;
}
Of course if you want both, key and value, then for...in is the only reasonable solution.
Given your Object:
var foo = { 'bar' : 'baz' }
To get bar, use:
Object.keys(foo)[0]
To get baz, use:
foo[Object.keys(foo)[0]]
Assuming a single object
This is the simplest and easy way. This is how we do this.
var obj = { 'bar' : 'baz' }
var key = Object.keys(obj)[0];
var value = obj[key];
console.log("key = ", key) // bar
console.log("value = ", value) // baz
Object.keys() is javascript method which return an array of keys when using on objects.
Object.keys(obj) // ['bar']
Now you can iterate on the objects and can access values like below-
Object.keys(obj).forEach( function(key) {
console.log(obj[key]) // baz
})
A one liner for you:
const OBJECT = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
'key4': 'value4'
};
const value = 'value2';
const key = Object.keys(OBJECT)[Object.values(OBJECT).indexOf(value)];
window.console.log(key); // = key2
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
Refer MDN
I was having the same problem and this is what worked
//example of an Object
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
//How to access a single key or value
var key = Object.keys(person)[0];
var value = person[key];
best way to get key/value of object.
let obj = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3',
'key4': 'value4'
}
Object.keys(obj).map(function(k){
console.log("key with value: "+k +" = "+obj[k])
})
I don't see anything else than for (var key in foo).
Since you mentioned $.each(), here's a handy approach that would work in jQuery 1.6+:
var foo = { key1: 'bar', key2: 'baz' };
// keys will be: ['key1', 'key2']
var keys = $.map(foo, function(item, key) {
return key;
});
The easiest way is to just use Underscore.js:
keys
_.keys(object)
Retrieve all the names of the object's properties.
_.keys({one : 1, two : 2, three : 3});
=> ["one", "two", "three"]
Yes, you need an extra library, but it's so easy!
use for each loop for accessing keys in Object or Maps in javascript
for(key in foo){
console.log(key);//for key name in your case it will be bar
console.log(foo[key]);// for key value in your case it will be baz
}
Note: you can also use
Object.keys(foo);
it will give you like this
output:
[bar];
Object.keys()
The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
var arr1 = Object.keys(obj);
Object.values()
The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
var arr2 = Object.values(obj);
For more please go here
There is no way other than for ... in. If you don't want to use that (parhaps because it's marginally inefficient to have to test hasOwnProperty on each iteration?) then use a different construct, e.g. an array of kvp's:
[{ key: 'key', value: 'value'}, ...]
Well $.each is a library construct, whereas for ... in is native js, which should be better
You can use Object.keys functionality to get the keys like:
const tempObjects={foo:"bar"}
Object.keys(tempObjects).forEach(obj=>{
console.log("Key->"+obj+ "value->"+tempObjects[obj]);
});
for showing as a string, simply use:
console.log("they are: " + JSON.stringify(foo));
If you are using AWS CloudFront Functions then this would work for you.
function handler(event) {
var response = event.response;
var headers = response.headers;
if("x-amz-meta-csp-hash" in headers){
hash=headers["x-amz-meta-csp-hash"].value;
console.log('hash is ' + hash);
}
}
Readable and simple solution:
const object1 = {
first: 'I am first',
second: 'I am second'
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// expected output:
// "first: I am first"
// "second: I am second"