We help IT Professionals succeed at work.

New podcast episode! Our very own Community Manager, Rob Jurd, gives his insight on the value of an online community. Listen Now!

x

JSON help

erikTsomik
erikTsomik asked
on
172 Views
Last Modified: 2017-05-04
I am trying to create a JSON to create a related drop downs. AND I got it to work. Now i need to add redirect to the JSON. So if the first drop down select option 2 it's pull the second row from the JSON which is this  "2": "New Driver Training,Supplemental Training", and process the list to make a drop down options  of 2 elements. And now if the user select for example Supplemental Training I need to redirect them to a different page.
{
  "1": "New Driver Training",
  "2": "New Driver Training,Supplemental Training",
  "3": "Supplemental Training,Manual Transmission Training, Senior Refresher Training"
}

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Can we see your code?

Your JSON structure is not optimal for this - you probably want to create something like this
[{
  "option": "New Driver Training",
  "subOptions": [{
    "option": "New Driver Training",
    "url": "http://someurl.com"
  },{
    "option": "Supplemental Training",
    "url": "http://someurl.com"
  }, {
   ...
  }]

Open in new window


When you build your <option> list for the select - you attach the URL as a property to the option - so that when it is selected you can retrieve the URL and redirect.

It is not clear from your JSON and your description what you are trying to do - but it sounds hierarchical in which case you should structure your data to match the hierarchy. If you can provide some code to show how you are currently working we can take it from there.
erikTsomikSystem Architect, CF programmer

Author

Commented:
I have already provided the JSON
so here is the code
$("#first-choice").change(function() {

		var $dropdown = $(this);

		$.getJSON("data.json", function(data) {

			var key = $dropdown.val();
			var vals = [];

			switch(key) {
				case '1':
					vals = data[1].split(",");
					break;
				case '2':
					vals = data[2].split(",");
					break;
				case '3':
					vals = data[3].split(",");
					break;
				case 'base':
					vals = ['Please choose from above'];
			}

			var $secondChoice = $("#second-choice");
			$secondChoice.empty();
			$.each(vals, function(index, value) {
				$secondChoice.append("<option>" + value + "</option>");
			});

		});
	});

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Do you have to use the JSON you provided or can you change it to be like the sample I provided?
erikTsomikSystem Architect, CF programmer

Author

Commented:
We can change the JSON
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
erikTsomikSystem Architect, CF programmer

Author

Commented:
I have tried your solution but it is does not work for me . I set the first drop down as a static and changed the JSON file
[{
  "1": "Option 1",
  "subOptions": [{
    "1": "New Driver Training",
    "url": "http://someurl.com"
  }]
  },{
    "2": "Option 2",
    "subOptions": [{
    "1": "New Driver Training",
    "url" : "http://someotherurl.com"
  },{
    "2": "Supplemental Training",
    "url" : "http://someotherurl.com"
  }]
  },{
    "3": "Option 3",
    "subOptions": [{
    "3": "Supplemental Training",
    "url" : "http://someotherurl333.com"
  },{
    "4": "Manual Transmission Training",
    "url" : "http://someotherurlabc.com"
  },{
    "5": "Senior Refresher Training",
    "url" : "http://someotherurlabcdef.com"
  }]
}]

Open in new window

$(function() {
$.getJSON("data.json", function(data) {

		 // REGISTER CHANGE EVENT HANDLER ON first-choice
	    $('body').on('change', '#first-choice', function(i,e) {
	      // GET VALUE OF SELECTED (index into data array)
	      var idx = $(this).val();
	      alert(data);
alert(idx);
	      // LOAD subOptions FROM data ARRAY USING index
	      var options = data[idx].subOptions;
alert(options);
	      // EMPTY second-choice READY FOR NEW <option>'s
	      $('#second-choice').empty();

	      // CREATE NEW OPTIONS WITH index IN subOptions AS VALUE
	      $.each(options, function(j,k) {
	        $('#second-choice').append(
	          $('<option/>', {value: j}).html(k.option)
	        )
	      });
	    });
	});

});

Open in new window

erikTsomikSystem Architect, CF programmer

Author

Commented:
How would I append data-url to the option element of the second drop down

so it looks something like this
<select id="second-choice" class="form-control" required="required">
<option value="0" data-url="pagename.html">Supplemental Training</option>
<option value="1" data-url="pagename.html">Manual Transmission Training</option>
<option value="2" data-url="pagename.html">Senior Refresher Training</option>
</select>

and page name is coming from json file

$.each(options, function(j,k) {
        $('#second-choice').append(
          $('<option/>', {value: j}).html(k.option)
        )
      });

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
There is no need to change the JSON file - you can remove the option property if you wish but you must keep the index the same as I have it.

You don't append the url to the option element - you can if you wish - I will post a sample on how to do that below - but in my example it just uses the values from first and second choice as indexes into the data array.

Same JSON as in my sample above
HTML
  <select id="first-choice">
	<option value="0">Option 1</option>
	<option value="1">Option 2</option>
	<option value="2">Option 3</option>
  </select>
  <select id="second-choice"></select>

Open in new window

jQuery
<script>
 $(function() {
  // GET JSON
  $.getJSON('t2394.txt', function(data) {
    
   // REGISTER CHANGE EVENT HANDLER ON first-choice
    $('body').on('change', '#first-choice', function(i,e) {
      // GET VALUE OF SELECTED (index into data array)
      var idx = $(this).val();

      // LOAD subOptions FROM data ARRAY USING index
      var options = data[idx].subOptions;

      // EMPTY second-choice READY FOR NEW <option>'s
      $('#second-choice').empty();

      // CREATE NEW OPTIONS WITH index IN subOptions AS VALUE
	  // HERE WE ADD THE url AS A data PROPERTY ON THE <option>
      $.each(options, function(j,k) {
        $('#second-choice').append(
          $('<option/>', {value: j}).html(k.option).data({url : k.url})
        )
      });
    });
    
    // REGISTER CHANGE ON second-choice
    $('body').on('change', '#second-choice', function(l,m) {

      // ALERT THE REDIRECT CODE TO DEMONSTRATE IT WORKS
	  // WE RETRIEVE THE URL FROM THE DATA PROPERTY OF THE SELECTED 
	  // <option> OF THIS <select>
      alert('window.location=' + $('option:selected', this).data('url'));
    });
  });
 });
</script>

Open in new window

Working sample here
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.