Error when trying to populate a drop-down box with a javascript array generated by a REST API call

Question

I have a page with a hidden drop-down box that appears when a checkbox is ticked via a JavaScript inner.HTML = command. As I'm aware I wouldn't be able to populate this from a document.onload function, I've got a <div>, that I'll be setting to style="display:none" when I have this working, where I have a drop-down box in for the options to be populated to, however I'm getting the error message 'Unable to set property 'innerHTML' of undefined or null reference' when attempting to do this. Is a <select> tag not able to have an ID or innerHTML value given to it?

Code is below:

var systemOptions = [];
var system = document.getElementById("systemstemp");
document.onload = getSystems();

function getSystems() {
  $.ajax({
    url: ".../_api/web/lists/getbytitle('Application List')/items?$select=Title",
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function (data) {
      systemOptions = data.d.results;
      for (var obj in systemOptions) {
        system.innerHTML = "<option value='" + systemOptions[obj].Title + "'>" + systemOptions[obj].Title + "</option>";
      }
    }
  });
}

<p><select id="systemstemp"></select></p>

systemOptions = [
  {Title: "Call Platform"},
  {Title: "CRM"},
  {Title: "Email"},
  {Title: "Monitoring"},
]

You can see the solution here. https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — Madhu Magar
– Madhu Magar, Commented Dec 12, 2019 at 14:07

Christos Lytras · Accepted Answer · 2019-12-12 14:25:29Z

1

The problem is that when you do:

document.onload = getSystems();

you're actually calling getSystems function immediately and not when document.onload fires. In order to run getSystems when onload triggers, set the function without parenthesis:

document.onload = getSystems;

or assign the function directly to the document.onload:

document.onload = function() {
  $.ajax({...});
}

EDIT

You should also use DOM API to create the select options like in this Q/A:

Adding options to select with javascript

edited Dec 12, 2019 at 14:25

answered Dec 12, 2019 at 14:18

Christos Lytras

37.4k4 gold badges87 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error when trying to populate a drop-down box with a javascript array generated by a REST API call

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related