Link to home
Start Free TrialLog in
Avatar of erikTsomik
erikTsomikFlag for United States of America

asked on

JSON help

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

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of erikTsomik

ASKER

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

Do you have to use the JSON you provided or can you change it to be like the sample I provided?
We can change the JSON
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

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

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