Как сформировать html из json?

Question

[Valeriy1997]

Cделал HTML который формируетьтся из json но гдето допустил ошибку работает только верхняя часть кода. Буду благодарен если кто укажет на ошибку в коде.

Вот рабочий код :

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

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

Answer 1

[aLLyofgod]

"укажЫте" — вот тут допустил. Правильно "укажИте". "жи и "ши" пиши с буквой "и".

А вообще, тебе даже подсветка синтаксиса подсказывает в чем дело.

...
{'Wraper': '1','img image-data': 'P5dasJ51AU', 'data-alt-src':'T0Yd1sdA5k_h.jpg', 'image-data': '5n_aW-asIQ0', 'title': 'Digital <br> As179 }]; 
...

Тут забыл кавычку:

{'Wraper': '1','img image-data': 'P5dasJ51AU', 'data-alt-src':'T0Yd1sdA5k_h.jpg', 'image-data': '5n_aW-asIQ0', 'title': 'Digital <br> As179' }];

Что такое:

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

Может быть:

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

Ну и в конце скобку не там поставил
console.log( containered).html(html.join(''));
Надо
console.log( containered.html(html.join('')));

Плюс, ты вызываешь функцию renderWorks, хотя подразумевашь renderWorked
renderWorked(workItemsed);

Comments

[Alexander Tartmin]

Полный разнос :D

[DevMan]

там в конце еще и вызов несуществующей функции.

[aLLyofgod]

Ага, но мне кажется это он просто переименовать забыл. Добавил на всякий случай, спасибо ;)

Answer 2

[Yuri Shikanov]

Используйте лучше какой-нибудь шаблонизатор, вроде handlebars.