Load JSON to datalist fails

Question

I try to add some inputs with 2 ways in the datalist. Why the 1st doesn't work? --> bootlply

var dataList = document.getElementById('json-datalist');

var jsonOptions = [{
                    "product": "11111",
                    "description": "description 1"
                  }, {
                    "product": "22222",
                    "description": "description 2"
                  }, {
                    "product": "33333",
                    "description": "description 3"
                  }, {
                    "product": "44444",
                    "description": "description 4"
                  }, {
                    "product": "55555",
                    "description": "description 5"
                  }]; 

jsonOptions.forEach(function(item) {

  var option = document.createElement('option');

  option.value = item.description;
  option.text = item.product;
  option.setAttribute('data-product', item.product);
  .
  dataList.appendChild(option);
});

and then

<div class="container">

    <div class="form-group">
         <div class="col-xs-4">
           <input class="form-control" name="description" type="text" id="ajax" list="json-datalist">
           <datalist id="json-datalist"></datalist>
         </div>


          <div class="col-xs-2">
            <datalist id="material">
              <option value="1">
              </option><option value="2">
              </option><option value="3">
            </option></datalist>
            <input type="text" list="material" class="form-control" name="material-0" placeholder="material">
          </div>

     </div>   




</div>

Answer 1

There is an extra . which causes syntax error

  option.setAttribute('data-product', item.product);
  . // <-------------------------------------------- This is your enemy
  dataList.appendChild(option);

Just remove it and it will work. :)

  option.setAttribute('data-product', item.product);
  dataList.appendChild(option);