How to generate html from json?

Question

JavaScript

I made HTML which is generated from json but somewhere I made a mistake, only the upper part of the code works. I would be grateful if someone points out an error in the code.
Here is the working code:

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

Here is the non-working code:

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

I tried to implement this markup:

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

I will be glad if you indicate where I made a mistake and thanks for the help

Answer 1

"specify" - here allowed. Correct "specify". "zhi and" write "shi" with the letter "i".
In general, even the syntax highlighting tells you what's wrong.

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

I forgot the quote here:
What:
May be:
Well, at the end, you put the parenthesis in the wrong place . Plus, you call the
renderWorks
function, although you mean renderWorked
renderWorked(workItemsed);

Answer 2

Better use some templating engine like handlebars .