Bestücken select-Tag Optionen dynamisch aus db Anruf

Question

Am versuchen, statische Inhalte auf meiner Web-App aus einer Datenbank Aufruf zu füllen, die eine JSON Liste von Elementen zurückgibt, dann möchte ich auf die Option 1 bevöl machen mit ..

JSON returned: 
{id: 0, categoryName: "General Discussion"}, 
. 
. 
. 
{id: 7, categoryName: "Cleaning and Repairs"} 

Mein Ruf:

 $.get("http://localhost:8080/cc/sc/cat").done(function(categories) { 
      var catList = document.getElementById("categories"); 
      var option = document.createElement("option"); 
      for (category in categories){ 
       console.log("value: " + categories[category].categoryName); 
       option.text = categories[category].categoryName; 
       catList.add(categories[category].categoryName); 
      } 
     }); 

Der HTML-Inhalt

<select id="categories" class="form-control"></select> 

Der Fehler:

(index):116 Uncaught TypeError: Failed to execute 'add' on 'HTMLSelectElement': The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)' 
at Object.<anonymous> ((index):116) 
at i (jquery.min.js:2) 
at Object.fireWith [as resolveWith] (jquery.min.js:2) 
at y (jquery.min.js:4) 
at XMLHttpRequest.c (jquery.min.js:4) 

Jede Hilfe wird geschätzt.

Answer 1

versuchen diese

$.get("http://localhost:8080/cc/sc/cat").done(function(categories) { 
      for (category in categories){ 
       $('#categories').append('<option>'+categories[category].categoryName+'</option>') 
      } 
     }); 

Answer 2

Sie haben Ihre Wahl wickeln Daten für Ihre wählen zu erzeugen, wie nachstehend Beispiel.

function generateSelect(){ 
    var categories = [{id: 1, categoryName: "General Discussion"},{id: 2, categoryName: "Cleaning and Repairs"}]; 

    var catList = document.getElementById("categories"); 
    for (var a = 0; a< categories.length; a++){ 
     var option = document.createElement("option"); 
     option.value = categories[a].id; 
     option.text = categories[a].categoryName; 
     catList.append(option); 
    } 
}