Addition classes to each boxes from array in object (JS) [duplicate]
0
This question already has an answer here:
Is there a way to add/remove several classes in one single instruction with classList?
12 answers
I want to add classes named like those in data array (categories) to each boxes in sequence (in container).
For example, first box except "box" class should have: "highlighted" "special-header" "important" classes.
I tried to do it like this, but it doesn't work:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}
I feel that it has to be something with forEach() or with another loop refers to categories array.
How to refer to each element in "categories" separately?
var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>javascript arrays javascript-objects
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
marked as duplicate by mplungjan javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 14 '18 at 13:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
Is there a way to add/remove several classes in one single instruction with classList?
12 answers
I want to add classes named like those in data array (categories) to each boxes in sequence (in container).
For example, first box except "box" class should have: "highlighted" "special-header" "important" classes.
I tried to do it like this, but it doesn't work:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}
I feel that it has to be something with forEach() or with another loop refers to categories array.
How to refer to each element in "categories" separately?
var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>javascript arrays javascript-objects
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
marked as duplicate by mplungjan javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 14 '18 at 13:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26
add a comment |
0
0
0
1
This question already has an answer here:
Is there a way to add/remove several classes in one single instruction with classList?
12 answers
I want to add classes named like those in data array (categories) to each boxes in sequence (in container).
For example, first box except "box" class should have: "highlighted" "special-header" "important" classes.
I tried to do it like this, but it doesn't work:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}
I feel that it has to be something with forEach() or with another loop refers to categories array.
How to refer to each element in "categories" separately?
var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>javascript arrays javascript-objects
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
This question already has an answer here:
Is there a way to add/remove several classes in one single instruction with classList?
12 answers
I want to add classes named like those in data array (categories) to each boxes in sequence (in container).
For example, first box except "box" class should have: "highlighted" "special-header" "important" classes.
I tried to do it like this, but it doesn't work:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}
I feel that it has to be something with forEach() or with another loop refers to categories array.
How to refer to each element in "categories" separately?
var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>This question already has an answer here:
Is there a way to add/remove several classes in one single instruction with classList?
12 answers
var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>var data = [{
id: 'box1',
title: 'First box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'special-header', 'important']
},
{
id: 'box2',
title: 'Second box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['special-header', 'important']
},
{
id: 'box3',
title: 'Third box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted', 'important']
},
{
id: 'box4',
title: 'Fourth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories: ['highlighted']
},
{
id: 'box5',
title: 'Fifth box',
content: '<p>Lorem ipsum dolor sit amet!</p>',
categories:
},
];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].classList.add(categories)
}<div class="container">
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
<div class="box">
<header></header>
<p></p>
</div>
</div>javascript arrays javascript-objects
javascript arrays javascript-objects
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
edited Nov 14 '18 at 13:26
mplungjan
87.5k21123181
87.5k21123181
asked Nov 14 '18 at 13:23
TraxanTraxan
11
asked Nov 14 '18 at 13:23
TraxanTraxan
11
asked Nov 14 '18 at 13:23
TraxanTraxan
11
11
marked as duplicate by mplungjan javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 14 '18 at 13:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by mplungjan javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 14 '18 at 13:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26
add a comment |
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26
add a comment |
3 Answers
3
active
oldest
votes
2
From the classList documentation:
add or remove multiple classes using spread syntax
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var categories = data[i].categories;
boxes[i].classList.add(...categories)
}
But here's the thing. If you've got all that data, why aren't you using it to build the HTML, rather than fill in the gaps? Here's an example:
var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
add a comment |
1
You need to massage the array a little and test for empty
Here I use the ...spread syntax to allow adding an array using .add
var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
add a comment |
0
Check the length of the categories array in your data before adding the class, if the array is empty it throws an error, check the fix below. (added the spread operator:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) box.classList.add(...categories); // check category length
}
If you were going old school and wanted to avoid the spread operator or newer JS syntax:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) {
categories.forEach(function(cl) { box.classList.add(cl); });
}
}
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
From the classList documentation:
add or remove multiple classes using spread syntax
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var categories = data[i].categories;
boxes[i].classList.add(...categories)
}
But here's the thing. If you've got all that data, why aren't you using it to build the HTML, rather than fill in the gaps? Here's an example:
var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
add a comment |
2
From the classList documentation:
add or remove multiple classes using spread syntax
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var categories = data[i].categories;
boxes[i].classList.add(...categories)
}
But here's the thing. If you've got all that data, why aren't you using it to build the HTML, rather than fill in the gaps? Here's an example:
var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
add a comment |
2
2
2
From the classList documentation:
add or remove multiple classes using spread syntax
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var categories = data[i].categories;
boxes[i].classList.add(...categories)
}
But here's the thing. If you've got all that data, why aren't you using it to build the HTML, rather than fill in the gaps? Here's an example:
var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
From the classList documentation:
add or remove multiple classes using spread syntax
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var categories = data[i].categories;
boxes[i].classList.add(...categories)
}
But here's the thing. If you've got all that data, why aren't you using it to build the HTML, rather than fill in the gaps? Here's an example:
var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>var data = [{"id":"box1","title":"First box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","special-header","important"]},{"id":"box2","title":"Second box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["special-header","important"]},{"id":"box3","title":"Third box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted","important"]},{"id":"box4","title":"Fourth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":["highlighted"]},{"id":"box5","title":"Fifth box","content":"<p>Lorem ipsum dolor sit amet!</p>","categories":}];
// `map` over the data and return an array of HTML strings
const boxes = data.map(({ id, title, content, categories }) => {
return `
<div class="box ${categories.join(' ')}" id="${id}">
<header>${title}</header>
${content}
</div>
`
});
// join the array and add the HTML to the container
const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', boxes.join(''));.box { border: 1px solid black; }
.special-header { color: green; }
.important { border: solid 1px red; }
.highlighted p { background-color: yellow; }<div class="container"></div>answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
edited Nov 14 '18 at 14:02
answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
answered Nov 14 '18 at 13:35
AndyAndy
29.1k73462
29.1k73462
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
add a comment |
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Liking the map...
– mplungjan
Nov 14 '18 at 13:59
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
Just to add a bit, you could create a document fragment, then create the elements and add them to the document fragment then add the fragment to the container. It's quicker than parsing the html string, but for such a small data set I like your code better, nice and clean.
– Harry Chilinguerian
Nov 14 '18 at 14:03
1
1
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
That was an excercise to do it with arrays, objects and loops. I am too newbie to do it in that way ;)
– Traxan
Nov 14 '18 at 14:07
add a comment |
1
You need to massage the array a little and test for empty
Here I use the ...spread syntax to allow adding an array using .add
var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
add a comment |
1
You need to massage the array a little and test for empty
Here I use the ...spread syntax to allow adding an array using .add
var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
add a comment |
1
1
1
You need to massage the array a little and test for empty
Here I use the ...spread syntax to allow adding an array using .add
var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
You need to massage the array a little and test for empty
Here I use the ...spread syntax to allow adding an array using .add
var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>var data = [{ id: 'box1', title: 'First box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'special-header', 'important'] }, { id: 'box2', title: 'Second box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['special-header', 'important'] }, { id: 'box3', title: 'Third box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted', 'important'] }, { id: 'box4', title: 'Fourth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: ['highlighted'] }, { id: 'box5', title: 'Fifth box', content: '<p>Lorem ipsum dolor sit amet!</p>', categories: }, ];
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
//Add classes to all boxes
var categories = data[i].categories;
boxes[i].querySelector("header").innerHTML=data[i].title || ""
boxes[i].querySelector("p").innerHTML=data[i].content.replace(/</?p>/,"");
if(categories.length>0) boxes[i].classList.add(...categories)
}.highlighted { background-color:yellow; }
.specialheader { font-weight:bold; }
.important { font-style :italic; }<div class="container">
<div class="box">
<header>Header 1</header>
<p>Para 1</p>
</div>
<div class="box">
<header>Header 2</header>
<p>Para 2</p>
</div>
<div class="box">
<header>Header 3</header>
<p>para 3</p>
</div>
<div class="box">
<header>header 4</header>
<p>Para 4</p>
</div>
<div class="box">
<header>Header 5</header>
<p>para 5</p>
</div>
</div>answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
edited Nov 14 '18 at 13:52
answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
answered Nov 14 '18 at 13:38
mplungjanmplungjan
87.5k21123181
87.5k21123181
add a comment |
add a comment |
0
Check the length of the categories array in your data before adding the class, if the array is empty it throws an error, check the fix below. (added the spread operator:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) box.classList.add(...categories); // check category length
}
If you were going old school and wanted to avoid the spread operator or newer JS syntax:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) {
categories.forEach(function(cl) { box.classList.add(cl); });
}
}
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
add a comment |
0
Check the length of the categories array in your data before adding the class, if the array is empty it throws an error, check the fix below. (added the spread operator:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) box.classList.add(...categories); // check category length
}
If you were going old school and wanted to avoid the spread operator or newer JS syntax:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) {
categories.forEach(function(cl) { box.classList.add(cl); });
}
}
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
add a comment |
0
0
0
Check the length of the categories array in your data before adding the class, if the array is empty it throws an error, check the fix below. (added the spread operator:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) box.classList.add(...categories); // check category length
}
If you were going old school and wanted to avoid the spread operator or newer JS syntax:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) {
categories.forEach(function(cl) { box.classList.add(cl); });
}
}
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
Check the length of the categories array in your data before adding the class, if the array is empty it throws an error, check the fix below. (added the spread operator:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) box.classList.add(...categories); // check category length
}
If you were going old school and wanted to avoid the spread operator or newer JS syntax:
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
let box = boxes[i];
//Add classes to all boxes
var categories = data[i].categories;
if (categories.length) {
categories.forEach(function(cl) { box.classList.add(cl); });
}
}
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
edited Nov 14 '18 at 13:43
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
answered Nov 14 '18 at 13:34
Harry ChilinguerianHarry Chilinguerian
25318
25318
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
add a comment |
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
1
1
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
Not enough. You need to handle the array too
– mplungjan
Nov 14 '18 at 13:39
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
That is ok. It throws an error but classes are added, despite the error. It is about how to add (it adds whole string to box, like: highlighted,special-header,important). And because of it classes doesn't work. There should not be any comma and should be spaces between.
– Traxan
Nov 14 '18 at 13:43
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
The above code should work, the spread operator does the trick, if you are looking fro a more old school approach that doesn't use the newer JS syntax you could iterate with a forEach and anonymous function, see code above. @mplungjan - Thanks and good catch.
– Harry Chilinguerian
Nov 14 '18 at 13:50
add a comment |
I made you a snippet. See the error? You need to fix that to make a Minimal, Complete, and Verifiable example - test if categories is empty
– mplungjan
Nov 14 '18 at 13:26