Reputation: 24019
I'm having an issue getting jquery objects to render as html.
In the code below, the tickBox
gets rendered as [object Object]
and not as html whereas all the rest is rendered correctly.
I know I could just add it as a string but that's not the goal here.
Why does the tickBox
not render as html?
const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];
const tickBox = $('<div/>', {
class: 'tickBox',
html: $('<div/>', {
class: 'ticked'
})
});
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
html: `${tickBox} ${item}`
/* I know I could do this */
//html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
});
});
$('<div/>', {
id: 'chartLegend',
class: 'legend',
title: 'Chart legend',
html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);
$('<ul/>', {
class: 'legend',
html: legendContent
}).appendTo('#chartLegend');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>
Upvotes: 1
Views: 5435
Reputation: 3658
you have to take HTML instead of an object like. you are using the whole object into HTML option. you just need to change a line
`${tickBox} ${item}`
to
`${tickBox.wrapAll('<div>').parent().html()} ${item}`
Or to
`${tickBox[0].outerHTML} ${item}`
For
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
html: `${tickBox.wrapAll('<div>').parent().html()} ${item}`
});
});
Upvotes: 1
Reputation: 337713
An alternative to concatenating the HTML of the tickBox
element would be to clone()
a new instance of it and append()
that to each legendContent
entity, like this:
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
}).append(tickBox.clone()).append(item);
});
const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];
const tickBox = $('<div/>', {
class: 'tickBox',
html: $('<div/>', {
class: 'ticked'
})
});
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
}).append(tickBox.clone()).append(item);
});
$('<div/>', {
id: 'chartLegend',
class: 'legend',
title: 'Chart legend',
html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);
$('<ul/>', {
class: 'legend',
html: legendContent
}).appendTo('#chartLegend');
.tickBox {
float: left;
width: 15px;
height: 15px;
background-color: #CCC;
margin: 0 5px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>
Upvotes: 1
Reputation: 6130
use tickBox[0].innerHTML to render the html content inside tickBox
const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];
const tickBox = $('<div/>', {
class: 'tickBox',
html: $('<div/>', {
class: 'ticked'
})
});
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
html: `${tickBox[0].innerHTML} ${item}`
/* I know I could do this */
//html: `<div class="tickBox"><div class="ticked"></div></div> ${item}`
});
});
$('<div/>', {
id: 'chartLegend',
class: 'legend',
title: 'Chart legend',
html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);
$('<ul/>', {
class: 'legend',
html: legendContent
}).appendTo('#chartLegend');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>
Upvotes: 1
Reputation: 27356
https://api.jquery.com/jQuery/#jQuery-html-attributes
The documentation states that the jQuery()
function takes an argument of PlainObject
. PlainObject
takes a html
parameter that it expects to be a string already. It is presently stringifying a Javascript object into a string, hence [object Object]
.
You should render this into a HTML string.
Upvotes: 2
Reputation: 23869
The problem is that you somehow need to serialize the HTML node to string, so that the interpolation works correctly.
One way is to use outerHTML
of the corresponding native element:
const legendData = ['hello world', 'welcome back', 'hotel california', 'never leave'];
const tickBox = $('<div/>', {
class: 'tickBox',
html: $('<div/>', {
class: 'ticked'
})
});
const legendContent = legendData.map(item => {
return $('<li/>', {
dataId: `${item.split(' ')[0]}`,
html: `${tickBox[0].outerHTML} ${item}`
});
});
$('<div/>', {
id: 'chartLegend',
class: 'legend',
title: 'Chart legend',
html: '<p id="chartLegendHeader">Legend</p>'
}).appendTo(`#chartContainer`);
$('<ul/>', {
class: 'legend',
html: legendContent
}).appendTo('#chartLegend');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chartContainer"></div>
Upvotes: 5