Populate select element using Vanilla JS and JSON file

Question

I'm trying to populate a select element using data from an external json file.

var dropDown = document.getElementById('dropdown');

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // success
    data = JSON.parse(request.responseText);
    console.log(data);

    for (var i = 0, len = data.length; i < len; i++) {
        alert('FOO');
        var data = data[i];
        dropDown.innerHTML(option.name);
    }
};

JSON

{
    "TopLevel": {
        "Second": [
            "data",
            "data",
            "data",
            "data"
        ],
        "Second": [
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            }
        ]
    },
    "TopLevel": {
        "Second": [
            "data",
            "data",
            "data",
            "data"
        ],
        "Second": [
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            },
            {
                "ThirdLabel": "data",
                "ThirdID": "data"
            }
        ]
    }
}

I've can successfully return my data using the above but for some reason I cant get the loop to run and im unsure what I'm doing wrong.

There's no console errors and my alert doesn't fire...

Also bare in mind that this check (request.status >= 200 && request.status < 400) is unsafe because you might no capture codes like 301, 204, etc.. — Silvio Biasiol
– Silvio Biasiol, Commented Feb 1, 2019 at 11:23
innerHTML is not a function, and this JSON represents an object — barbsan
– barbsan, Commented Feb 1, 2019 at 11:26
If there are no console errors, and your alert doesn't fire, either data.length is 0 or your if statement never returns true. Note that what you've posted as JSON is actually an object instead. — Rick Hitchcock
– Rick Hitchcock, Commented Feb 1, 2019 at 11:43

robinvrd · Accepted Answer · 2019-02-01 11:23:28Z

2

The best way to add option to a select is using document.createElement("option") according to W3schools Select add() Method.

var json = { "data": ["orange", "banana", "apple", "pear"] };

var dropdown = document.getElementById("dropdown");

for (var i = 0; i < json.data.length; i++) {
  var option = document.createElement("option");
  option.text = json.data[i];
  option.value = json.data[i];
  dropdown.add(option);
}

<select id="dropdown"></select>

answered Feb 1, 2019 at 11:23

robinvrd

1,8481 gold badge16 silver badges31 bronze badges

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

2 Comments

Liam Over a year ago

Thanks @Robinvrd, how would this work with an external file like my example though?

robinvrd Over a year ago

The same way you did it on your example, if your console.log(data) is working, you have all you need.

Abhishek Pandey · Accepted Answer · 2019-02-01 11:36:22Z

0

You need to write code in this way.

The data is returning object {} therefore the length of the data is undefined and loop is not running.

You need to select particular data which will return array.

Ex: data.TopLevel.Second

var data = {
  "TopLevel": {
    "Second": [
      "data",
      "data",
      "data",
      "data"
    ],
    "Second": [{
        "ThirdLabel": "data",
        "ThirdID": "data"
      },
      {
        "ThirdLabel": "data",
        "ThirdID": "data"
      },
      {
        "ThirdLabel": "data",
        "ThirdID": "data"
      }
    ]
  },
  "TopLevel": {
    "Second": [
      "data",
      "data",
      "data",
      "data"
    ],
    "Second": [{
        "ThirdLabel": "data",
        "ThirdID": "data"
      },
      {
        "ThirdLabel": "data",
        "ThirdID": "data"
      },
      {
        "ThirdLabel": "data",
        "ThirdID": "data"
      }
    ]
  }
}

var dropDown = document.getElementById('dropdown');
debugger;
var options = "";
for (var i = 0, len = data.TopLevel.Second.length; i < len; i++) {
  var item = data.TopLevel.Second[i];
  options += "<option> " + item.ThirdID + "</option>"
}
document.getElementById("dropdown").innerHTML = options;

<select name="" id="dropdown"></select>

answered Feb 1, 2019 at 11:36

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

1 Comment

Abhishek Pandey Over a year ago

glad, could help you.

Collectives™ on Stack Overflow

Populate select element using Vanilla JS and JSON file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related