CODEWITHSUNDEEP
javascriptjquery
StudioTime
StudioTime

Reputation: 24019

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 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

Answers (5)

Rakesh Sojitra
Rakesh Sojitra

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

JSFiddle

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337733

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

Akhil Aravind
Akhil Aravind

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

christopher
christopher

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

31piy
31piy

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

Related Questions