Learn how to populate dropdown from a JSON file with jQuery.
Allow users to select an item from a group of options in a list form. The data source will come from a JSON file being populated in a select option using jQuery.
This method will organize the source of data and would remove the need to re-write the data in all places where it will be used. You only need to update one JSON file and the dropdown select options will also be updated all at the same time.
Requirements
- jQuery – 3.6.4 at the time of writing
- JSON File – the result from Create JSON Files In PHP Tutorial will be used.
The goal of this tutorial is to create a populate dropdown select list from a JSON file with jQuery.
Step 1.
Initialize jQuery in your HTML page.
If you don’t know how to do this yet, read and copy the Complete Example from the tutorial Get Started With jQuery in 2 Simple Steps.
Step 2.
Put a blank HTML select element inside the body tag, just above the $( document ).ready(function() { script code. Name that element members.
<body>
<select name="members"></select>
<script>
$( document ).ready(function() {Step 3.
Send an asynchronous HTTP (Ajax) request through jQuery.
Inside the $( document ).ready(function() { script code, put the following codes.
$.ajax({
url: "members.json",
type: "GET",
dataType: "json",
success: function(data) {
// code here
}
});Where.
- url – is the complete url path to the JSON file.
- type – is the request method.
- dataType – is the type of the file we will be requesting.
- success – is the function where the result will be parsed and populated after a successful ajax request made.
Step 4.
Inside the success: function(data) {, loop through each of the result, and append each data to the select element.
Note that data here will contain the result from the ajax request made, and it is in the form of JSON object.
$.each( data.members, function( key, value ) {
$('select[name="members"]').append(
$('<option/>', {
text: value[0] + ' ' + value[1]
})
);
});Where.
This block of code will loop through the result data.
-
$.each( data.members, function( key, value ) { // code here });
The code below will append the data to the select element.
-
$('select[name="members"]').append( // code here );
Create a new option element using the data result with the codes below. Now that the result is available, we can now prepare the options with the data from the JSON file.
-
$('<option/>', { text: value[0] + ' ' + value[1] })
The sample JSON file has several different data on it, we will only use the first name and the last name information. Particularly the first and second value, which will be represented as follows.
- value[0] – First name.
- value[1] – Last name.
{
"members": [
[
"Jackson",
"Barbara",
"27",
"F",
"Florida"
],
[
"Kimball",
"Andrew",
"25",
"M",
"Texas"
],
[
"Baker",
"John",
"28",
"M",
"Arkansas"
],
[
"Gamble",
"Edward",
"29",
"M",
"Virginia"
],
[
"Anderson",
"Kimberly",
"23",
"F",
"Tennessee"
],
[
"Houston",
"Franchine",
"25",
"F",
"Idaho"
],
[
"Franklin",
"Howard",
"24",
"M",
"California"
],
[
"Chen",
"Dan",
"26",
"M",
"Washington"
],
[
"Daniel",
"Carolyn",
"27",
"F",
"North Carolina"
],
[
"Englert",
"Grant",
"25",
"M",
"Delaware"
]
]
}All is set, we can now test.
Complete Example.
<html lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<select name="members"></select>
<script>
$( document ).ready(function() {
$.ajax({
url: "members.json",
type: "GET",
dataType: "json",
success: function(data){
$.each( data.members, function( key, value ) {
$('select[name="members"]').append(
$('<option/>', {
text: value[0] + ' ' + value[1]
})
);
});
}
});
});
</script>
</body>
</html>Result.
Before.
After.
Leave a Reply