Добрый день. Аяксом занимаюсь ниделю. Не могу допереть, как при помощи jqery собрать html.
То есть нужно чтоб , скрипт читал json видел например item jsona собирал HTML и вставлял даные из json в собраные dom елементы которые jqery собирает когда видит json.
ниже представлен json который я сделал , а чуть ниже html структура которая должна из него получиться.


{
"works-item":{

"item":{
"title":"Limited <br>для VAZ",
"image-data":"VAZ",
}

"item":{
"title":"Limited <br>в BAZ",
"image-data":"BAZ",
}

<div id="cases" class="c-works">
<h2 class="work-header" style="display: none;"></h2>
<div class="box_skvere">
<img data-url="worksVAZ" src="img/works/VAZ.jpg">
<h3>Limated <br>
для VAZ</h3>
</div>
<div class="box_skvere">
<img data-url="worksBAZ" src="img/works/BAZ.jpg">
<h3>Limited <br>
в BAZ</h3>
</div>
</div>

Тоесть грубо говоря в Html изначально ничего нет все собираеться после прочтения и парсинга jsona. И количество собраных дом елементов должно соотвецтвовать количеству , итемов в json.
Помогите розобраться пожалуйста , кто знает)
Спасибо)

бухалтер фантоцци, Как на прямую ? Не совсем понял. Через json осбиратьдся должно, потому что потом будет быстрее Подкоректирвать json- просто добавив туда нужный итем с описанием , а HTML собиреться на его основе

skyANA,

Спасибо, сделал так как вы говорили, работает но для всего кода . Гдето допустил ошибку но немогу найти , буду благодарен если кто укажет на ошибку в коде.

Вот код : <script>
function renderWorks(items) {
var container = $('#cases'), html = [], i, item;

html.push('<h2 class="work-header" style="display:none"></h2>');

for (i = 0; i < items.length; i ++){
item = items[i];

html.push('<div class="box_skvere">');
html.push('<img data-url="works', item['image-data'], '" src="img/works/', item['image-data'], '.jpg">');
html.push('<h3>', item['title'], '</h3>');
html.push('</div>');

}

html.push('</ul>');
html.push('<div class="clearfix"></div>');
container.html(html.join(''));
}

var workItems = [
{ 'image-data': 'Baz', 'title': 'Digital <br> Baz' },
{ 'image-data': 'As179', 'title': 'Digital <br> As179' },
{ 'image-data': 'Rs159', 'title': 'Digital Signage <br> для Rs159' },
{ 'image-data': 'Ret121', 'title': 'Digital Signage <br> в Ret121' },
{ 'image-data': 'Pret543', 'title': 'Digital Signage <br> Pret543' },
{ 'image-data': 'Dret212', 'title': 'Digital Signage <br> Dret212' }];

renderWorks(workItems);
</script>
<script>


function renderWorked(items) {
var containered = $('.works blocks'), html = [], i, item;


for (i = 0; i < items.length; i ++){
item = items[i];

html.push('<div class="works' + item['Category'] + 'hide">');
html.push('<div class="work-wrapper closed w' + item['Wraper']+'">');
html.push('<img data-url="preview"' + item['image-data'] + '" src="img/works/preview/' + item['image-data'] + 'data-alt-src="' + item['data-alt-src'] + '.jpg" title="" alt="">');
html.push('<h3>'+ item['title'] + '</h3>');
html.push('</div>');


}

html.push('</div>');
console.log( containered).html(html.join(''));
}

var workItemsed = [
{'Wraper': '2','Category': 'Baz','img data-video': '5n_aW-PsdQ0', 'data-alt-src':'T0Yd1dsBA5k', 'image-data': '1RmdspZTaY', 'title': 'Digital <br> Baz' },
{'Wraper': '1','img image-data': 'P5dasJ51AU', 'data-alt-src':'T0Yd1sdA5k_h.jpg', 'image-data': '5n_aW-asIQ0', 'title': 'Digital <br> As179 }];
renderWorks(workItemsed);
</script>


Пробовал реализовать вот ету разметку:

<div class="works blocks">
<div class="worksBaz" style="height: auto;">
<div class="work-wrapper closed w2">
<img data-video="T0Yd1Fsd5k" data-alt-src="img/works/preview/T0Yd1dsA5k_h.jpg" src="img/works/preview/T0Yd1FTBA5k.jpg" title="" alt="" />
<h4> Baz (пример2)</h4>
</div>
<div class="work-wrapper closed w1">
<img data-video="JOMXK_UsO3I" data-alt-src="img/works/preview/JOMXK_UlO3I_h.jpg" src="img/works/preview/JOMXK_UlO3I.jpg" title="" alt="" />
<h4>Baz (пример3)</h4>
</div>

Буду рад если укажыте где ошибся и спасибо за помощь