Appending variables in string definition

Question

I'm trying to format a table of data as a string and return it to the page. I have the following, but I'm afraid this isn't a valid way to define my variable.

var tableOutput = ' <
  table class = \"child-info\" cellpadding=\"5\" cellspacing=\"0\" border=\"0\" style=\"padding-left:50px;\">'+
'<tr>' +
'<td>Level:</td>' +
'<td>' + d.deg_codes[0] + '</td>' +
  '</tr>' +
  '<tr>' +
  '<td>Level:</td>' +
  '<td>' + d.deg_codes[1] + '</td>' +
  '</tr>' +
  '</table>';
return tableOutput;

However, it works when I just return the entire definition statement by itself. Unfortunately, I need it as a variable to be able to modify it. Is there a better way to define this? Or do I have to do a huge number of appends?

EDIT:

Got it working as:

      var tableOutput = `
      <table class = "child-info" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
          <tr>
              <td>Level USF Tampa:</td>
              <td>${d.deg_codes[0]}</td>
          </tr>
          <tr>
              <td>Level USF Tampa:</td>
              <td>${d.deg_codes[1]}</td>
          </tr>
      </table>`;

A l w a y s S u n n y · Accepted Answer · 2018-09-12 16:16:20Z

1

Use javascript template strings

`string text line 1
 string text line 2`

Also remove unnecessary quotes ' and + for concatenation

function showTable() {
  const d = {
    deg_codes: [3434, 4444]
  };

  var tableOutput = `<table class = "child-info" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
          <tr>
              <td>Level:</td>
              <td>${d.deg_codes[0]}</td>
          </tr>
          <tr>
              <td>Level:</td>
              <td>${d.deg_codes[0]}</td>
          </tr>
      </table>`;

  return tableOutput;
}

document.write(showTable());

edited Sep 12, 2018 at 16:16

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

answered Sep 12, 2018 at 16:07

vicbyte

3,7901 gold badge14 silver badges21 bronze badges

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

3 Comments

chevybow Over a year ago

Your link is in Polish. Should probably change it to an English one since we are on an English website.

vicbyte Over a year ago

@chevybow Done, i accidentally copied before language change.

Stephen P Over a year ago

You can take out the language string in the URL and MDN will try to pick a language-appropriate version. I always paste MDN urls as, for example, https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals

Collectives™ on Stack Overflow

Appending variables in string definition

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related