3

Estoy trabajando en una web con CodeIgniter, necesito crear un select por cada elemento que recibo en un array o json. no sé cuál sea la mejor opción como respuesta de un post que realizo con ajax. El problema que tengo es que recibo un array como éste:

(Parte del var_dump)

array (size=5)
  'Monday 10' => 
    array (size=8)
      0 => string '16:00:00' (length=8)
      1 => string '16:30:00' (length=8)
      2 => string '17:00:00' (length=8)
      3 => string '17:30:00' (length=8)
      4 => string '18:00:00' (length=8)
      5 => string '18:30:00' (length=8)
      6 => string '19:00:00' (length=8)
      7 => string '19:30:00' (length=8)
  'Monday 17' => 
    array (size=8)
      0 => string '16:00:00' (length=8)
      1 => string '16:30:00' (length=8)
      2 => string '17:00:00' (length=8)
      3 => string '17:30:00' (length=8)
      4 => string '18:00:00' (length=8)
      5 => string '18:30:00' (length=8)
      6 => string '19:00:00' (length=8)
      7 => string '19:30:00' (length=8)

Y si recibo un json a traves de json_encode recibo algo como esto:

{
    "Monday 10": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 17": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 24": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 31": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 07": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"]
}

No sé como acceder a cada elemento; ya he intentado iterar con la función $.each pero accedo a: [,{," y asi sucesivamente. La idea es que me quede un label con el día, y en el select los horarios.

1 respuesta 1

6

Solo iteras el JSON con for in y el array de cada clave con forEach o $.each de jQuery.

var data = {
    "Monday 10": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 17": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 24": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 31": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"],
    "Monday 07": ["16:00:00", "16:30:00", "17:00:00", "17:30:00", "18:00:00", "18:30:00", "19:00:00", "19:30:00"]
};

function createSelects() {
  for(let key in data) {
    var wrapper = createWrapper();
    var label = createElement('label');
    var select = createElement('select');
    
    label.textContent = key;
    data[key].forEach(function(hour) {
      var option = createElement('option');
      option.setAttribute('value', hour);
      option.textContent = hour;
      select.appendChild(option);
    });
    wrapper.appendChild(label);
    wrapper.appendChild(select);
    document.body.appendChild(wrapper);
  }
}

function createWrapper() {
  var section = createElement('section');
  section.classList.add('input-group');
  return section;
}

function createElement(tagName) {
  return document.createElement(tagName);
}
.input-group {
  display: inline-block;
  margin: 10px 40px;
}
.input-group > * {
  display: block;
}
.input-group label {
  font-family: 'segoe ui';
  font-size: 15px;
  font-weight: 500;
}
.input-group select {
  border: 1px solid #ccc;
  margin-top: 10px;
  outline: none;
  padding: .4rem .65rem;
}
.input-group select:focus {
  border: 1px solid #777;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onload="createSelects()">

  
</body>
</html>

1
  • 2
    Muchísimas gracias!!! el 5 oct. 2016 a las 16:32

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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