JS

AJAX JSON POPULATE DROPDOWN

(quick guide & examples)

HTML & DUMMY JSON DATA

01

HTML SELECTOR <select id="demo"></select>

DUMMY JSON DATA ON SERVER ["Apple","Blueberry","Cherry","Durian","Elderberry"]

AJAX FETCH

02

FETCH JSON DATA FROM SERVER fetch("SERVER-URL") .then(res => res.json())

LOOP & GENERATE OPTIONS .then(data => {   let s = document.getElementById("demo");   data.forEach((item, i) => {     let o = document       .createElement("option");     o.innerHTML = item;     s.appendChild(o);   }); });

AJAX XMLHTTPREQUEST

03

NEW XMLHTTPREQUEST OBJECT var xhr = new XMLHttpRequest(); xhr.open("GET", "SERVER-URL");

LOOP & GENERATE OPTIONS xhr.onload = () => {   let data = JSON.parse(xhr.response),       s = document.getElementById("demo");   data.forEach((item, i) => {     let o = document.createElement("option");     o.innerHTML = item;     s.appendChild(o);  }); };

GO! xhr.send();