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.

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

node js mongo db and angular js tutorial for beginners from scratch

error = MongoId not found in symfony application

Leave a Reply

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

*
*