Create a dynamic dropdown form that loads its data from a JSON file using JQuery

Question

In a class, I was asked to make a dynamic drop-down menu in a form using HTML5 and JavaScript. I did that here.

Now, I need to call data from a JSON file. I looked at other answers on SOF and am still not really understanding how to use JQuery to get info from the JSON file.

I need to have 2 fields: the first field is a Country. The JSON key is country and the value is state. A copy of the JSON file and contents can be found here. The second drop-down field adds only the values / arrays related to its associated Country.

Here is a copy of my HTML5 file:

        <!DOCTYPE html>
        <html lan="en">
            <head>
        <!--        <script type="text/javascript" src="sampleForm.js"></script>-->
        <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> -->
                <script type="text/javascript" src="getData.js"></script>
                <script type="text/javascript" src="moreScript.js"></script>
            <meta charset="UTF-8";
                <title>Select Country and State</title>
                <link rel="stylesheet" href="formStyle.css" />
            </head>
            <body>
          <form id="locationSelector" enctype='application/json'>
                <br id="selectCountry"></br>
                <select id='country'></select>
                <br id="selectState">=</br>
                <select id='state'></select>
            </form>
          </body>
        </html>

Here is a copy of the JS file I wrote so far that tries to get the data from the JSON file and fails:

  $(document).ready(function() {

      var data = "countryState.JSON";

      var $selectCountry = $("#country");

      $.each(data.d, function(i, el) {
          console.log(el);
          $selectCountry.append($("<option />", { text: el }));
      });
  });

Here is the content from the other JS file that adds the field instruction:

var selectYourCountry = document.getElementById('selectCountry');
selectYourCountry.innerHTML = "Select Your Country: ";
var selectYourState = document.getElementById('selectState');
selectYourState.innerHTML = "Select Your State";

This was supposed to at least add the values to the field, but nothing but empty boxes appear on the web page.

I then need to make a conditional statement like the one at here but calling or referencing data from the JSON file.

I have only taken some HTML and JavaScript courses, not JQuery and JSON. So, your help will greatly increase my knowledge, which I will be very grateful for.

Thank you!!

I found this SOF answer and changed my JS file to the following:

    $(document).ready(function()
    {
    $('#locationSelector').click(function() {

        alert("entered in trial button code");

            $.ajax({
                type: "GET",
                url:"countryState.JSON",
                dataType: "json",
                success: function (data) {
                    $.each(data.country,function(i,obj)
                    {
                     alert(obj.value+":"+obj.text);
                     var div_data="<option value="+obj.value+">"+obj.text+"</option>";
                    alert(div_data);
                    $(div_data).appendTo('#locator');
                    });
                    }
              });
            });
    });

And, I edited my HTML document as follows:

  <form id="locationSelector" enctype='application/json'></form>

I removed and added back the <select> tags and with the following at least I get a blank box:

 `<form id="locationSelector" enctype='application/json'>
    <select id="locator"></select>
</form>`

I feel like I am getting closer, but am still lost.

Happy to help. You need to use an ajax get request to your json file. — Dan Zuzevich, Oct 06 '16 at 05:20

score 3 · Accepted Answer · answered Oct 06 '16 at 05:24

3

Can you try this:

 $.get("countryState.JSON", function( data ) {
            var html = "";
        $.each(data.d, function(i, el) {
          console.log(el);
          html += "<option value='"+Your value+"'>"+Your displayed text+"</option>";
      });
      $('#state').html(html);
});

answered Oct 06 '16 at 05:24

Sanjay Kumar N S

4,653
4
23
38

It's important to note that this probably won't work if testing locally with static files (i.e. no webserver) because you generally can't use AJAX to fetch local files. See [this SO question](http://stackoverflow.com/questions/6923707) for more information. – Hydrothermal Oct 06 '16 at 05:31
I did not know that. I am using local files on Windows 7 using Firefox. – host_255 Oct 06 '16 at 05:41
Do I replace this `$.get` code with my `$.ajax` code, or add to the file? @Hydrothermal – host_255 Oct 06 '16 at 05:43
1

@host_255 `$.get` is just a shortcut for `$.ajax({ type: "GET"...` so you can use either one. I don't believe it's possible to get around the local AJAX issue in Firefox, so you'll most likely have to get set up with a lightweight webserver. – Hydrothermal Oct 06 '16 at 05:47
So to clarify what everything means: .get() is the GET function. What does `var html = "";` do, make the options blank? `html +=` is adding options to the form. What do I replace `Your value` and `Your displayed text` with? And, `$('#state').html(html);` calls the JSON key values state and appends those values to the html variable defined in the function. Is that correct? @Hydrothermal – host_255 Oct 06 '16 at 05:50
1

Your value is the value to be retrieved from variable e1 , may be country id or country value(). And the Your displayed text is the value to be displayed. (Which also to be taken from the variable e1) – Sanjay Kumar N S Oct 06 '16 at 05:52

Create a dynamic dropdown form that loads its data from a JSON file using JQuery

1 Answers1