How to create select for each element in an associative array that I receive as a response to an ajax post

Question

How to create select for each element in an associative array that I receive as a response to an ajax post

Navigation

#1 by (7 votes)

4

I am working on a website with CodeIgniter, I need to create a select for each element I receive in an array or json. I do not know which is the best option as a response to a post I do with ajax. The problem I have is that I receive an array like this:

(Part of the 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)

And if I receive a json through json_encode I get something like this:

{
    "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"]
}

I do not know how to access each element; I have already tried iterating with the function $.each but I access to: [,{," and so on. The idea is that I keep a label with the day, and in the select the schedules.

javascript html php json

asked by Matias Blanco 05.10.2016 в 16:18

source

1 answer

Color changes with JavaScript Problem with header () in PHP

score 7 · Accepted Answer

You just iterate the JSON with for in and the array of each key with forEach or $.each of 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>