How To Render Jquery Objects To Html - Seeing [object Object]

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 corre

Solution 1:

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');

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="chartContainer"></div>

Solution 2:

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.

Solution 3:

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');

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="chartContainer"></div>

Solution 4:

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: 05px00;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="chartContainer"></div>

Solution 5:

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}`
  });
});

JSFiddle