In JavaScript, how would I take the values of an object and add each one as a separate class on an element in the DOM?
For instance, let’s say I have this object:
const METADATA = {
foo: 'test1',
bar: 'test2'
};
I want to add the values present within this object as two separate classes on the <html> tag.
In order to achieve this, I tried to specify the properties of the METADATA object within the jQuery .addClass method:
$('html').addClass( METADATA["foo","bar"] );
But this only added the last value of the object as a class on the <html> tag, which has left me fairly confused.
Any thoughts?
>Solution :
METADATA["foo","bar"] only gets the value of the bar property, because you’re using the comma operator, which is a bit odd: It evaluates its first operand ("foo"), throws that value away, then evaluates its second operand ("bar") and takes that as its result. So it’s the same as METADATA["bar"] or METADATA.bar (because evaluating "foo" has no side-effects).
Instead, you need to get each value separately:
$('html').addClass([METADATA.foo, METADATA.bar]);
That works because addClass allows you to provide an array of class names to add. (Alternatively, just call addClass twice.)
Or without jQuery:
document.documentElement.classList.add(METADATA.foo, METADATA.bar);
The add method of DOMTokenList allows you to specify multiple class names to add as discrete arguments.