CODEWITHSUNDEEP
javascripthtmlhtml-lists
TeaNyan
TeaNyan

Reputation: 5079

Value of list populated with javascript

How to populate the select list with the values that I got with javascript?

I am sending a GET request to a .php site which gives me the respond in JSON format. Now I want to put those lines I got into the select list.

<select id = "list" name=log size=50 style=width:1028px>

<script type="text/javascript">
window.onload = function () {

  var bytes=0;
  var url = "/test/log.php?q='0'";
  function httpGet(url)
  {
    var xhttp = new XMLHttpRequest();
    var realurl = url + bytes;
    xhttp.open("GET", url, true);
    xhttp.onload = function (e) {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                console.log(xhttp.responseText);
                var response=JSON.parse(xhttp.responseText);
                var log = response.key;
                bytes = log.length;
            }
        };
    xhttp.onerror = function (e) {
        console.error(xhttp.statusText);
      }
    };


    xhttp.send();
  }

  var updateInterval = 2000; 
  function update() {

    httpGet(url);
      setTimeout(update, updateInterval);
  }

  update();
}
</script>
</select>

The response I get from log.php is "{"key":"whole log file"}". Now I want to store that reponse into a list and populate it every 2 seconds.

Upvotes: 0

Views: 45

Answers (1)

Rando Hinn
Rando Hinn

Reputation: 1322

Loop over the contents of the returned string after JSON.parse-ing it. Create option elements from it, and insert those into the select.

 var html = "";
 var obj = JSON.parse(xhttp.responseText);
 for(var key in obj) {
   html += "<option value=" + key  + ">" +obj[key] + "</option>";
 }
 document.getElementById("list").innerHTML = html;

See JSBin

Upvotes: 1

Related Questions