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.

Is tasks.json the name of the json file? it looks like you're loop is incorrect. tasks.json is an array of objects, and each object has a name and a task array containing objects of taskname and time. In your .change function you do $.each on tasks.json, you are looping through the overall objects, which contain name and the task array. You need a second loop to loop through the tasks. — Jared
– Jared, Commented Jan 31, 2018 at 22:32

user9263373 · Accepted Answer · 2018-01-31 23:32:53Z

@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);

});

Collectives™ on Stack Overflow

JSON dependent dynamic dropdown values are undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related