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

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.