JSON dependent dynamic dropdown values are undefined

Question

I am currently working on a dynamic dependent dropdown. I was able to get the first list of items however the second list of items doesn't show in the dropdown. I'm absolute beginner to jquery and following is what I have done so far.

json :

[{
    "name": "A",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "10"
      }
    ]
  },
  {
    "name": "B",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "60"
      },
      {
        "taskname": "ZZ",
        "time": "10"
      }
    ]
  },
  {
    "name": "C",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "10"
      }
    ]
  }
]

html :

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
</head>

<body>
  Platform:
  <select id="platform">
    </select> Task Type:
  <select id="taskname">
    </select>
  <script src="jquery-2.2.4.min.js"></script>
  <script src="custom.js"></script>
</body>

</html>

jquery :

$(function() {
  var platforms;
  var stateOptions;
  var districtOptions;
  $.getJSON('tasks.json', function(result) {
    $.each(result, function(i, platform) {
      platforms += "<option value='" +
        platform.name +
        "'>" +
        platform.name +
        "</option>";
    });
    $('#platform').html(platforms);
  });

  $("#platform").change(function() {
    if ($(this).val() == "siab") {
      $.getJSON('tasks.json', function(result) {
        $.each(result, function(i, task) {
          stateOptions += "<option value='" +
            task.taskname +
            "'>" +
            task.taskname +
            "</option>";
        });
        $('#taskname').html(stateOptions);
      });
    }
  });
});

I want to get the list of relative task names in the second dropdown based on the first selection. For an example when someone selects siab from first dropdown, the second dropdown must populate with Promobox , Newswire , Video . Currently the second dropdown has undefined values I don't know what I'm doing wrong here.

Answer 1

@alancfm is correct. You don't need to call your JSON file twice. Just call it once and store it in a variable. Once stored, you can populate your second select by getting the index of the selected $('platform') item and populate $('taskname') from that. I have a working fiddle here using somewhat different code because I wasn't able to make the $.getJSON() call to store the variable https://jsfiddle.net/td3o8yvr/8/

$(function() {
  var platforms;
  var stateOptions;
  var districtOptions;
  var jsonData;

  $.getJSON('tasks.json', function(result) {
    jsonData = result;

    $.each(result, function(i, platform) {
    platforms += "<option value='" +
      platform.name +
      "'>" +
      platform.name +
      "</option>";
    });
    $('#platform').html(platforms);
  });

  $("#platform").change(function (){
    var idx = $("#platform").prop('selectedIndex');
    var platforms = jsonData[idx].task;

    stateOptions = "";
    for (i = 0; i < platforms.length; i++) {
      stateOptions += "<option value='" +
        platforms[i].taskname +
        "'>" +
        platforms[i].taskname +
        "</option>";
    };

  $('#taskname').html(stateOptions);

});

JSON dependent dynamic dropdown values are undefined

Question

1 answers

solution1
1 ACCPTED 2018-01-31 23:02:15

JSON dependent dynamic dropdown values are undefined

Question

1 answers

solution1 1 ACCPTED 2018-01-31 23:02:15

solution1
1 ACCPTED 2018-01-31 23:02:15