Question

I don’t even know where to start?!? A hint would be much appreciated!

JS:

document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;
document.getElementById('second').getElementsByTagName('h3')(0).innerHTML = data.products[1].product;
document.getElementById('third').getElementsByTagName('h3')(0).innerHTML = data.products[2].product;

document.getElementById('first').getElementsByTagName('p')(0).innerHTML = data.products[0].description;
document.getElementById('second').getElementsByTagName('p')(0).innerHTML = data.products[1].description;
document.getElementById('third').getElementsByTagName('p')(0).innerHTML = data.products[2].description;

document.getElementById('first').getElementsByTagName('h3')(0).setAttribute('class', data.products[0].code);
document.getElementById('second').getElementsByTagName('h3')(0).setAttribute('class', data.products[1].code);
document.getElementById('third').getElementsByTagName('h3')(0).setAttribute('class', data.products[2].code);

document.getElementById('first').setAttribute('code', data.products[0].code);
document.getElementById('second').setAttribute('code', data.products[1].code);
document.getElementById('third').setAttribute('code', data.products[2].code);

HTML:

<div class="items">
<ul>
<li id="first"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="second"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="third"><h3></h3><span><p></p><br><button>Find</button></span></li>
</ul>
</div>

Answer 1

Try the following javascript:

var ids = ['first', 'second', 'third'];
for (var i = 0; i < ids.length; i++) {
    var product = data.products[i];
    var element = document.getElementById(ids[i]);

    element.getElementsByTagName('h3')[0].innerHTML = product.product;
    element.getElementsByTagName('p')[0].innerHTML = product.description;
    element.getElementsByTagName('h3')[0].setAttribute('class', product.code);
    element.setAttribute('code', product.code);
}