0

estoy intentando mostrar horarios que tengo en un array pero la idea es que se muestren uno debajo del otro y no lo estoy logrando. Los elementos los traigo separados por *. Si alguien me puede ayudar a ver què estoy haciendo mal se lo agradeceria.

 horario_proximo_origen ="11:37:00*11:38:00*11:39:00*11:40:00*11:41:00";
 array_horario_proximo_origen= horario_proximo_origen.split('*');
  cantidad_horario_proximo = array_horario_proximo_origen.length;


 document.getElementById("titulo_horario_proximo_origen").text= "Prox. horarios "+result.linea_origen+", parada "+result.nombre_origen_directo;

 for (i=0; i<=cantidad_horario_proximo; i++){

document.getElementById("horario_proximo_origen").text= array_horario_proximo_origen;
 
  }
 <div id ="proximos_horarios" style ="visibility:block; width:100%;">
 
 <a id= "titulo_horario_proximo_origen" href="#" style = " background-color: #86CE18;color:#FFF;  width:100%"></a><br>
  
  
  <a id= "horario_proximo_origen" href="#" style = "color:#000;"></a>


<br><br>
 </div>

2 respuestas 2

2

La respuesta que da @David es una muy buena aproximación a la solución del problema, aquí te dejo otra solución alternativa usando String Templates, he sustituido el innerText del cuerpo del horario por innerHTML.

He dado un valor a result, para evitar un error de ejecución.

He separado cada variable en una constante y he dado los valores de los cuerpos usando String Templates, en el caso del cuerpo se hace un join de los valores devueltos por el map con la cadena
y así tienes el salto de línea.

/* Doy un valor al objeto result porque si no da error de ejecución al no estar definido en tu código inicial */

const result = {
  linea_origen: 'Sevilla',
  nombre_origen_directo: 'Madrid',
}

/* Los datos con los que vamos a trabajar */
const horario_proximo_origen = '11:37:00*11:38:00*11:39:00*11:40:00*11:41:00';
const array_horario_proximo_origen = horario_proximo_origen.split('*');

/* Separamos los selectores de los elementos, quizá más adelante querramos hacer más cosas con ellos aparte de modificar su contenido */
const scheduleTitle = document.getElementById("titulo_horario_proximo_origen");
const scheduleBody = document.getElementById('horario_proximo_origen');

/* Llenamos el Título del Horario */
scheduleTitle.innerText = `Próx. horarios ${result.linea_origen}, parada ${result.nombre_origen_directo}`;

/* Llenamos el Contenido del Horario iterando sobre array_horario_proximo_origen y uniéndolo con la cadena <br> (salto de línea)*/
scheduleBody.innerHTML = `${array_horario_proximo_origen.map(time => `${time}`).join('<br>')}`
<div id ="proximos_horarios" style ="visibility:block; width:100%;">
    <a id= "titulo_horario_proximo_origen" href="#" style = " background-color: #86CE18;color:#FFF;  width:100%"></a><br>
    <a id= "horario_proximo_origen" href="#" style = "color:#000;"></a>
</div>

2

Te he optimizado un poco el código para hacerlo más legible. Con el siguiente código te debería de funcionar. He utilizado la propiedad innerHTML en lugar de text para poder añadir párrafos, los cuales son display block por defecto y automáticamente ocuparán una nueva linea cada uno. Esto es más eficiente que utilizar los <br>

horario_proximo_origen = "11:37:00*11:38:00*11:39:00*11:40:00*11:41:00";

let array_horario_proximo_origen = [];
array_horario_proximo_origen = horario_proximo_origen.split('*');

let titulo = document.getElementById("titulo_horario_proximo_origen");
let horarios = document.getElementById("horario_proximo_origen");

titulo.innerHTML = "<p> Prox. horarios "+result.linea_origen+", parada "+result.nombre_origen_directo+"</p>;

array_horario_proximo_origen.forEach(function(i){
  horarios.innerHTML += "<p>" + i + "</p>";
})
<div id ="proximos_horarios" style ="visibility:block; width:100%;">
 
 <a id= "titulo_horario_proximo_origen" href="#" style = " background-color: #86CE18;color:#FFF;  width:100%"></a><br>
  
  
  <a id= "horario_proximo_origen" href="#" style = "color:#000;"></a>


<br><br>
 </div>

2
  • ¿No sería mejor usar Array.forEach? Al no dar valor de retorno a Array.map parece un mal uso de este método. Commented el 28 may. 2019 a las 14:52
  • tienes razón, ahora estaría correcto
    – David
    Commented el 28 may. 2019 a las 14:53

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.