Jquery appending to add options in select attribute does not work

I need to sort through the JSON and for all the verified users add a option to the <select> attribute which has a id of verified-users-list.

The issue is that I am trying to append the results of the verified users to HTML

function getVerifiedUsers(id, url) {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', url);
  ourRequest.onload = function() {
    var ourData = JSON.parse(ourRequest.responseText);
    let test = verified(ourData)
    //console.log(test);  
    $(id).append(`<option id: ${test.id}>${test.name}</option>`);
  }
  ourRequest.send();
}

function verified(data) {
  var user = {};
  var j = 0;
  for (let i = 0; i < data.length; i++) {
    if (data[i].verified == true) {
      user[j] = data[i];
      j++;
    }
  }
  return user
}

getVerifiedUsers("#verified-users-list", "http://localhost:3000/user");

AJAX response:

[{
    "id": 0,
    "name": "Yan Li",
    "verified": true
  },
  {
    "id": 1,
    "name": "Anna Lopez"
  },
  {
    "id": 2,
    "name": "Bobby Patel",
    "verified": true
  }
]

24 thoughts on “Jquery appending to add options in select attribute does not work”

Leave a Comment