1

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
}

1 respuesta 1

3

Ésta puede ser una opción, se recomienda que si cada caja tiene algo diferente, se le asigne un id y no trabajarlo todo con la clase.

function addTitle() {
     let col = document.querySelectorAll('.col');
       col.forEach( function(boxService,index){
       let elementH2 = document.createElement("h2");
       let newText = document.createTextNode(services[index].name);
       elementH2.appendChild(newText);
       boxService.prepend(elementH2);
 }
1
  • Gracias por contestar tan rápido! Pero me olvidé un pequeño detalle y es que la solución debe ser con js puro; en el curso que estoy haciendo no empezamos aún con jQuery.. Commented el 25 dic. 2021 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.