Написание кода в цикле

Question

я в настоящее время написания JSON результат на страницу, используя для петли, аналогичной приведенной ниже примере (упрощенный вариант):

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

Выходная переменная становится раздутым & запутанным. Есть ли способ записать в выходную переменную без необходимости "", так как особенно сложно вставить переменные & позже изменить код?

Answer 1

Попробуйте ниже HandlebarJS Templating Snippet. Включите эту опцию:

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

Handlebar Шаблон:

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

HTML:

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

JQuery и шаблона Компиляция:

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

Просто используйте одинарные кавычки, чтобы избежать побега, как это:

JS Fiddle

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

Answer 3

Я хотел бы сделать следующее в попытке сделать его 'проще'

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 4

Что вам действительно нужно создавать DOM-элементы для представления DOM, а не строки, которые представляют DOM.

Document Object Model: Запись элементов на странице и связанных с ними значений.

Чтобы создать элемент, 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 5

В зависимости от версии браузера, вы можете быть в состоянии использовать template strings, которые позволяют более читаемый код. В вашем случае:

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

Примечание задняя кавычка или кавычка ` Однако шаблонный движок будет лучше всего подходит для больших контента.

Answer 6

Пробег: JSON.Stringify.

Пример: JSON.stringify(data)

Answer 7

Как насчет этого? :

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>