Merge HTML Element object with a custom object

Question

I'm trying to figure out why I can't merge 2 or more objects when one of them is an HTML Element.

EDIT:
Why when i merged with Object.assign 2 "normal" objects like obj1 and obj2 i get the values from obj2 on common properties, but when i do the same with root which is an HTML element i don't get its values (for example the value of id property)

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { id: "obj2", textContent: "i am obj2"};
const merged1 = Object.assign({}, obj1, obj2); // the new object got the id and textContent from obj2
const merged2 = Object.assign({}, obj1, root); // the new object got the id and textContent from obj1. why not from root?
console.log(merged1);
console.log(merged2);
console.log(root.id);
console.log(root.textContent);

<div id="root">i am root</div>

Are you expecting "i am obj1" and "i am obj2" to be concatenated? — guest271314
– guest271314, Commented Jun 3, 2017 at 22:10
nope, i am expecting to get a new object while the id and textContent properties will get their values from the root object as its the last argument passed to Object.assign. — Sagiv b.g
– Sagiv b.g, Commented Jun 3, 2017 at 23:08

guest271314 · Accepted Answer · 2017-06-03 23:45:55Z

3

Pass root as first parameter to Object.assign()

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { textContent: "i am obj2"}
const merged = Object.assign(root, obj1, obj2);
console.log(merged);
console.log(root.id);
console.log(root.textContent);

<div id="root">i am root</div>

i don't want to override root, i want a new object and get the relevant values from the root object.

const root = document.getElementById("root");
const obj1 = { id: "obj1", textContent: "i am obj1" };
const obj2 = { textContent: "i am obj2"};
const {id, textContent} = root;
const merged = Object.assign({}, obj1, obj2, {id, textContent});
console.log(merged);
console.log(root.id);
console.log(root.textContent);

<div id="root">i am root</div>

EDIT: Why when i merged with Object.assign 2 "normal" objects like obj1 and obj2 i get the values from obj2 on common properties, but when i do the same with root which is an HTML element i don't get its values (for example the value of id property)

Object.assign() can copy enumerable properties of an object. HTMLDivElement id and textContent properties are not enumerable.

Object.assign()

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.

const root = document.getElementById("root");
const props = ["textContent", "id"];

for (const prop of props) console.log(Object.propertyIsEnumerable(root, prop));

<div id="root">i am root</div>

edited Jun 3, 2017 at 23:45

answered Jun 3, 2017 at 22:07

guest271314

1

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

3 Comments

Sagiv b.g Over a year ago

i don't want to mutate root, i want a new object and get the relevant values from the root object.

Sagiv b.g Over a year ago

thank you, i know i can do that but that's not my point (what if i have like 20 attributes?). my question is why is it different from "normal" objects why can't i use Object.assign on an html element?

guest271314 Over a year ago

@Sag1v Not sure what you mean? Can you provide an example of expected result at a "normal object"?

Collectives™ on Stack Overflow

Merge HTML Element object with a custom object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related