Writing code in a for loop

Question

I am currently writing a JSON result to a page using a for loop similar to the example below (simplified version):

var output = "";
for (i in response) {
    var ID = response[i].ID
    var name = response[i].name

    output += "<div id=\""+ID+"\">"+name+"</div>"
}

$("#allResults").html(output);

The output variable becomes bloated and confused. Is there a way to write to the output variable without the need for "", since it is especially difficult to insert the variables and then change the code?

Answer 1

Try the HandlebarJStemplate snippet below . Include this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

Manipulator Template:

<script id="name-template" type="text/x-handlebars-template">
  {{#each people}}
    <div id="{{ID}}">{{name}}.</div>
  {{/each}}
</script>

HTML:

<div class="content-placeholder"></div>

Compiling jQuery and template:

$(function () {
  // Grab the template script
  var theTemplateScript = $("#name-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // This is the default context, which is passed to the template
  var context = {
    people: [ 
      { ID: 1000, name: 'Simpson' },
      { ID: 1001, name: 'Griffin' },
      { ID: 1002, name: 'Cartman' },
      { ID: 1003, name: 'McCormick' }
    ]
  };

  // Pass our data to the template
  var theCompiledHtml = theTemplate(context);

  // Add the compiled html to the page
  $('.content-placeholder').append(theCompiledHtml);
});

Answer 2

I would do the following in an attempt to make it look "simpler"

var allResults = $("#allResults");
for ( i in response ) {
    var ID = response[i].ID,
        name = response[i].name;

    $('<div/>')
        .attr('id', ID)
        .html(name)
        .appendTo(allResults);
}

Answer 3

DOM- DOM, , DOM.

: .

, jQuery

span = $("<span>");
div = $("<div >");
anchor = $("<anchor >");
//etc.

, append.

, ,

//<div id="hi"></div>
var hi = $('<div>');
hi[0].id = "hi";

//<div id="foo"><span>Bar</span></div>
var foo = $("<div>");
foo[0].id = "foo";
var Bar = $("<span>");
Bar.text("Bar");
foo.append(Bar);

JSON.

var output = $("#allResults");
for (i in response) {
    var pair = $("<div>");
    pair[0].id = response[i].ID;
    pair.text(response[i].name);

    output.append(pair);
}

Answer 4

, . :

output += `<div id="${response[i].ID}">${response[i].NAME}</div>`;

` , .

Answer 5

?

var response = [
  { ID: 1, name: "a"},
  { ID: 2, name: "b"},
  { ID: 3, name: "c"},
  { ID: 4, name: "d"}
];
var output = "";
var divElement = "<div id='$id'>$name</div>"
for (i in response) {
    var ID = response[i].ID
    var name = response[i].name
    output += divElement.replace("$id",ID).replace("$name",name)
}

$("#allResults").html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="allResults">
</p>

Hide result

Answer 6

, , :

JS Fiddle

output += '<div id="'+ID+'">'+name+'</div>';

Answer 7

JSON.Stringify.

: JSON.stringify(data)