Soy principiante en js, así que la cuestión que voy a plantear puede ser súper fácil pero no logro encontrar la solución.. Tengo un array de objetos (una web que simula un sitio de reservas de servicios) con sus propiedades. Ahora bien; quisiera acceder a la propiedad nombre de cada objeto y a ese nombre ponerlo como un h2 en su div correspondiente y no logro hacerlo.. A continuación paso el html y js para poder mostrar mejor
Aquí el html:
<div class="container">
<div class="row">
<div class="col">
<img src="media/toalla_velas.jpg" alt="">
</div>
<div class="col">
<img src="media/mujer_recibiendo_masajes.jpg" alt="">
</div>
<div class="col">
<img src="media/spa-treatment-over-dark-wall.jpg" alt="">
</div>
<div class="col">
<img src="media/terapia_facial.jpg" alt="">
</div>
<div class="btn">
<button id="see-btn" class="btn-see reserve">Ver más</button>
<button id="reserve" class="reserve">Reservar</button>
</div>
</div>
Necesito que dicho h2 esté en cada div con clase "col", arriba de la foto correspondiente.
A continuación muestro el array y las funciones:
const services = [{id: 1, name: 'service 1', price: 30},
{id: 2, name: 'service 2', price: 35},
{id: 3, name: 'service 3', price: 35},
{id: 4, name: 'service 4', price: 30}]
function addTitle() {
let col = document.getElementsByClassName('col');
let title = document.createElement("h2");
findId(services, services.id);
title.createTextNode(`${services.name}`)
services.forEach(service => {
col.innerHTML.prependChild(title)
});
}
function findId (objects, id) {
const index = objects.findIndex(object => object.id == id);
console.log(objects[index].name)
return index
}