Dropdown JSON data fetch

I'm currently working with a JSON and I'm facing some issues with the data fetch, it's only displaying 2 of the 3 dropdowns I need. I need to display the field corregimientos and be able to select the fields under corregimientos. can someone help me and tell me what I'm missing out on? I'm almost running out of ideas.

Here is a related post for any background. JSON dependent dynamic dropdown values are undefined

var jsonData = [
    {
        "name":"default"
    },
    {
        "name":"Panamá",
        "district":[
            {
                "districtname":"Balboa",
                "corregimientos":[
                    {
                        "nameCo":"La Guinea",
                        "price":2.00
                    },
                    {
                        "nameCo":"San Miguel",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Ensenada",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Esmeralda",
                        "price":2.00
                    }
                ]
            }
        ]
    },
    {
        "name":"Panamá2",
        "district":[
            {
                "districtname":"default"
            },
            {
                "districtname":"Balboa2",
                "corregimientos":[
                    {
                        "nameCo":"La Guinea",
                        "price":2.00
                    },
                    {
                        "nameCo":"San Miguel",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Ensenada",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Esmeralda",
                        "price":2.00
                    }
                ]
            }
        ]
    }
];

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

  for (i = 0; i < jsonData.length; i++) {
    platforms += "<option value='" +
      jsonData[i].name +
      "'>" +
      jsonData[i].name +
      "</option>";
  }
  $('#platform').html(platforms);

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

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

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

  });
  $("#taskname").change(function() {
    var idx2 = $("#platform").prop('selectedIndex');
    var platforms2 = jsonData[idx2].name;

    stateOptions2 = "";
    for (j = 0; j < platforms2.length; j++) {
      stateOptions2 += "<option value='" +
        platforms2[j].corregimientos +
        "'>" +
        platforms2[j].corregimientos +
        "</option>";
    };

    $('#taskname2').html(stateOptions2);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

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

<body>
  Platform:
  <select id="platform">
  </select>
  
  Task Type:
  <select id="taskname">
  </select>
  
  Task Type2:
  <select id="taskname2">
  </select>
</body>

</html>

Solution

Couple issues

First problem is because you are using the 'name" of the jasonData at idx2.

var platforms2 = jsonData[idx2].name`

should be

var platforms2 = jsonData[idx].district[idx2].corregimientos

The second is you are using idx2 from the wrong list.

var idx2 = $("#taskname").prop('selectedIndex');
var idx = $("#platform").prop('selectedIndex');

You need both indexes to find the correct data.

Correct code for the second drop down should start like this:

var idx2 = $("#taskaname").prop('selectedIndex');
var idx = $("#platform").prop('selectedIndex');
var platforms2 = jsonData[idx].districts[idx2].corregimientos

...
...

stateOptions2 += "<option value='" +
        platforms2[j].nameCo+
        "'>" +
        platforms2[j].nameCo +
        "</option>";

Now your platforms2 will have the correct jsondata in it and use the property nameCo. That should address your issue.

JSFiddle: https://jsfiddle.net/JordonFieldPro/318sb9g5/