How to render jquery objects to html - seeing [object Object]

Question

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>

I assume it's because you're trying to output a jQuery object not using jQuery for the task. — connexo
– connexo, Commented Jun 12, 2018 at 7:21

31piy · Accepted Answer · 2018-06-12 07:21:42Z

5

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>

answered Jun 12, 2018 at 7:21

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StudioTime Over a year ago

I actually went with const tickBox = $('<div/>', { class: 'tickBox', html: $('<div/>', { class: 'ticked' }) })[0].outerHTML; which keeps the code a bit cleaner to me, so thanks for the idea

christopher · Accepted Answer · 2018-06-12 07:22:58Z

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.

answered Jun 12, 2018 at 7:22

christopher

27.4k6 gold badges58 silver badges90 bronze badges

2 Comments

connexo Over a year ago

Actually this is the only real answer to OP's question Why does the tickBox not render as html? Unfortunately it does not offer a solution which can be applied as-is.

christopher Over a year ago

I often find wisdom exists between answers as well as within them. Multiple answers are just as desirable as one cohesive solution :)

Akhil Aravind · Accepted Answer · 2018-06-12 07:27:32Z

1

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>

answered Jun 12, 2018 at 7:27

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

1 Comment

StudioTime Over a year ago

Check the source when rendered, you'll see this is wrong.

Rory McCrossan · Accepted Answer · 2018-06-12 07:36:39Z

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>

Rakesh Sojitra · Accepted Answer · 2018-06-12 09:12:57Z

1

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

edited Jun 12, 2018 at 9:12

answered Jun 12, 2018 at 7:32

Rakesh Sojitra

3,6682 gold badges19 silver badges35 bronze badges

4 Comments

Rakesh Sojitra Over a year ago

@DarrenSweeney: It's working sir... I have added jsfiddle you can check it

StudioTime Over a year ago

No, it's not, check the source. tickBox is two divs, your solution removes the outer <div>

Rakesh Sojitra Over a year ago

@DarrenSweeney: alright I got your point and I have corrected my answer you can verify it.

Rakesh Sojitra Over a year ago

@DarrenSweeney: OP is same as the accepted answer. <li dataid="hello"><div class="tickBox"><div class="ticked"></div></div> hello world</li>. Did you checked updated jsfiddle link?

Collectives™ on Stack Overflow

How to render jquery objects to html - seeing [object Object]

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related