0

I'm trying to clean up my code, and I find in my script many snippets that are similar to the following: 

$msg.html('<a href="#" data-userName=' + msg.user +
      ' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>' + '<span class="timestamp"> <b>&middot;</b> ' + 
      jQuery.timeago(msg.created_at) +'</span></br>' + 
      msg.message);

I tried doing something like

var $userProfile = $('<a href="#" data-userName=' + msg.user +
      ' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>');
var $timeStamp = $('<span class="timestamp"> <b>&middot;</b> ' + 
      jQuery.timeago(msg.created_at) +'</span>'); 
$msg.html($userProfile + $timeStamp + '</br>' + msg.message);

to make it more readable, but then the page doesn't build correctly. Instead, it shows something like [Object][Object].

Why is this happening, and how do I fix this error?

TheRealFakeNews
  • 7,512
  • 16
  • 73
  • 114
  • HTML wants a string, you're giving it an object. Try appending the object instead – Sterling Archer Mar 01 '16 at 19:34
  • Could someone please explain why my question was downvoted? It's an honest question and I'm new to jQuery. – TheRealFakeNews Mar 01 '16 at 19:39
  • Because it's far too broad for SO's format. You want to know how to write clean code? It just takes practice and experience. Asking us to clean it up for you isn't what this site is for. – ndugger Mar 01 '16 at 19:41
  • 4
    asking how to correct the broken output I think it fine, asking how to "best clean up the code" is OT, as it is primarily opinion based. However http://codereview.stackexchange.com/ does exist and may be a better place for the 'clean up' side of this question. – rlemon Mar 01 '16 at 19:45
  • 1
    Possible duplicate of [How can I display a JavaScript object?](http://stackoverflow.com/questions/957537/how-can-i-display-a-javascript-object) – Sterling Archer Mar 01 '16 at 19:47
  • 1
    Adding on to @rlemon's comment: Please note that [codereview.se] only takes complete, working, code for their reviews. When in doubt, look at the help center. – Madara's Ghost Mar 01 '16 at 19:49

2 Answers2

3

This is a clear (long, though) way of refactoring your html-generating jQuery code:

var $a = $('<a>', {
  'href': '#',
  'data-userName': msg.user,
  'class': 'userName',
  'html': '@' + msg.user
}).on('click', function() { showCurrUsersMsgs(this);});

var $span = $('<span>', {
  'class': 'timestamp',
  'html': '<b>&middot;</b>' + msg.created_at
});

var $p = $('<p>', {html: msg.message});

var $html = $a.add($span).add($('<br>')).add($p);
alepeino
  • 9,551
  • 3
  • 28
  • 48
  • Why is it that you can have `$html` without putting `var` in front of it? – TheRealFakeNews Mar 01 '16 at 22:27
  • Thanks, I just edited it. (If you are asking about the reason it still worked, basically not declaring with var means it will look for a variable with the same name declared in an outer scope until it reaches the global scope, upon which it will create the variable in said scope). – alepeino Mar 01 '16 at 22:36
0

You can't "add" two jQuery objects together. You should just be building up the HTML fragments as strings, and then concatenating the strings together:

var userProfile = '<a href="#" data-userName=' + msg.user +
      ' class="userName" onClick="showCurrUsersMsgs(this);">@' + msg.user + '</a>';
var timeStamp = '<span class="timestamp"> <b>&middot;</b> ' + 
      jQuery.timeago(msg.created_at) +'</span>'; 
$msg.html(userProfile + timeStamp + '</br>' + msg.message);

That said, if you're actually interested in cleaning this up, you should stop building up your HTML using simple string concatenation. Choose a real templating library like Handlebars, HTMLBars, Jade, etc etc.

user229044
  • 232,980
  • 40
  • 330
  • 338