jQuery Select Option from Json

jQuery select option population using json as data source

jQuery select option tutorial will show how you can glue together the following terms together

  • select box
  • JSON
  • jQuery
  • *Javascript

* You might ask isn’t jQuery javascript? Yes indeed you are right, but jQuery is a framework making javascript programming a lot easier.

When I say plain javascript, or as some are calling it old school javascript, I meant to use the same task without using jQuery.

What select box is and types of select box options

Select box is one of the most used HTML element along with text input, radio option and the like.

Select box will allow you to provide dropdown options where you can select one or more items from it. You can make the select box to allow multiple selection using multiple attribute



The above is multi select that you can select multiple options by holding ctrl keyboard if you are on windows and command button if you are on windows.

Here is the code to create multi select box


<select multiple id="programming_languages" name="programming_languages">
<option>php</option>
<option>java</option>
<option>javascript</option>
<option>ruby</option>
<option>go</option>
<option>shell script</option>
<option>c#</option>
<option>python</option>
<option>perl</option>
</select>

As you can see on the example, adding multiple attribute in select tag would change the select box into multi select box.

Here is an example of select box option that is not multi

What is JSON and what is its use?

JSON stands for Javascript Object Notation. It is standard format for sending and getting data to and from web server.

It is like having a common format for sending request and getting data back. JSON is not language or browser specific. As long as you can run javascript on the browser, you can process it.

The general format of JSON looks like
{"key":"value", "anotherKey":"anotherValue"}

Enclose the key and values with in quote, “, and have curly braces at the front and back of the data. This is standard for non array data.

And for array data you will have:

["php", "java", "javascript", "ruby", "go", "shell", "c#", "python", "perl"]

The above should work fine as long as you are not having any key value kinda of relation in the data. If you have one, then make sure to enclose one with in curly bracket

[{"php":{"desc":"php programming language", "since":"1990"}, "java":{"desc":"java programming language", "since":"1995"}}]

That way, each added ones would considered as objects.

Accessing JSON elements with jQuery

I will be focusing on array data of jQuery since those are the most common types to interact with.

So, the first step in populating the select options would be reading the JSON data itself first.

Lets say the json data looks like this:

var programming_languages = [{"1":"php", "2":"java", "3":"javascript", "4":"ruby", "5":"go", "6":"shell script", "7":"c#", "8":"python", "9":"perl"}];

In the above example the key could be a database id the server sent and we will populate the options based on that.


<script>
 $.each(programming_languages, function (key, value){
     var object = value;
     $.each(object, function(k,v) {
         console.log(v); //this will print names of programming languages to the console.
     }
 });
}
</script>

Once we know how to access the values, then it would be a matter of gluing all together to populate jquery select option.


<script>
function produceOptions(programming_languages) {
 var populated_options = "";
 $.each(programming_languages, function (key, value){
     var object = value;
     $.each(object, function(k,v) {
         populated_options += "<option value='"+k+"'>"+v+"</option>";
     }
 });
 
 return populated_options;
}
</script>

From the above example, the populated_options contains all the options that are read from the JSON array.

The final step on jQuery select option tutorial would be assigning this option text to the select box of our choice.

Lets say, for the purpose of jQuery select option tutorial, there is a select box with id programming_languages_select.

Then to populate the options


var programming_languages = [{"1":"php", "2":"java", "3":"javascript", "4":"ruby", "5":"go", "6":"shell script", "7":"c#", "8":"python", "9":"perl"}];
$('#programming_languages_select').append(produceOptions(programming_languages))

The above snippet would populate the select box with appropriate key values and that would conclude the jquery select option tutorial.

Passing composite object parameter to jersey in Restful Java web

J2EE Maven Eclipse Hello World Tutorial Part Two

how to get user input and process it in nodejs tutorial

how to display html files from node js example tutorial

using express package in node – installation and usage example tutorial

a hello world tutorial using node js with http web server

2 Comments
  1. Tesfaye Gari

    I am not exactly sure why you need jQuery in this scenario. There is a vanilla JS called forEach and you don’t need jQuery to just enumerate the array. Array forEach can easily do it

  2. gulleman

    Thanks Tesfaye for the input.

    Yup, that is very true. This was a what I used to show the ‘each’ method of the jQuery. Otherwise, forEach can be used on the array itself and it is more natural as you suggested.

    Also, looking at the example I gave, it is a bit out of the ordinary. Usually the json we got looks like {id: 1, "lang": "php"} than {1:"php"}

    For that:

    
    var pl = [{"1":"php"}, {"2":"java"}, {"3":"javascript"}, {"4":"ruby"}, {"5":"go"}, {"6":"shell script"}, {"7":"c#"}, {"8":"python"}, {"9":"perl"}];
    var populated_options = "";
    pl.forEach(function(lang) {
             populated_options += "";
         });
    

    Can do it per you suggestion.

    or using arrow function:

    
    var pl = [{"1":"php"}, {"2":"java"}, {"3":"javascript"}, {"4":"ruby"}, {"5":"go"}, {"6":"shell script"}, {"7":"c#"}, {"8":"python"}, {"9":"perl"}];
    var populated_options = "";
    pl.forEach(lang => {
             populated_options += "";
         });
    

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*