Fill DropDown List on selection

Question

Helo guys, I've been working for my project for several months. Now I'm trying to fill my dropdown list named (drpIdCorsi), based on the selection of another dropdown list named (drpDocente).

This is how my JSON object is composed:

listaCorsi = 
 [
   {nomeCorso: "some course name"},
   {emailDocente: "some email"},
 ]

I've loaded with an AJAX request a JSON object (which is filled correctly). Now I'm trying to navigate my JSON object and fill the dropdown list, but it doesn't work.

This is the first function:

var listaCorsi = selezionaCorsoDocenti();

var listaCorsiDDL = '';
$('#drpDocente').on('change',function()
{ 
    docente = $('#drpDocente').val(); 
    docente = docente.trim();
    docente= docente.split("-")[0];//gets the email of the professor

    console.log(listaCorsi);
    console.log(docente);
    console.log(listaCorsi);
    if(!$.isArray(listaCorsi))
        listaCorsi = [listaCorsi];
    $.each(listaCorsi,function(key,value)
    {
        console.log(value);
        if(docente == value.emailDocente)
            listaCorsiDDL += '<option value="">' + value.nomeCorso + '</option>';
    });

    $('#drpIdCorsi').append(listaCorsiDDL);

}).change();

This is the function called above (It actually works, but I'm not able to fill the second dropdown list, cause it shows undefined as result or nothing in the second dropdown list)

function selezionaCorsoDocenti()
{
var listaCorsi = [{}];
$.get('selezionaCorsiPerDocente',function(responseJson)
{
    if(responseJson != null)
    {
        var i = 0;
        $.each(responseJson,function(key,value)
        { 
                listaCorsi[i] = [{nomeCorso: value.NOME_CORSO}, {emailDocente: value.EMAIL}];
                i = i + 1;  
        });
    }
    else
        alert("AJAX FAILED");
});
return listaCorsi;
}

I'd like to fill the second dropdown list like this:

if(docente === value.EMAIL)
   course += '<option value="">' + value.NOME_CORSO + '</option>
$('#drpIdCorsi').append(course);

The function selezionaCorsoDocenti() WORKS JUST FINE. The problem is that the JSON object listaCorsi, when I iterative over that object with the $.each() prints undefined for a certain field of the object

maybe you will find an answer here https://stackoverflow.com/questions/11255219/use-a-javascript-array-to-fill-up-a-drop-down-select-box — MattOpen, Jun 13 '19 at 16:54
so `selezionaCorsoDocenti()` is the function that is not working and the rest is? can you validate that there is a response or share any status errors from that ajax call? — Steve0, Jun 13 '19 at 17:23
@Steve0 **selezionaCorsoDocenti()** works perfectly. The problem is that when I try to get the value of a certain email, on the JSON (which is FILLED PROPERLY), it doesn't work. Every time _value.emailDocente_ is _undefined_ — SHl MRJ, Jun 13 '19 at 17:28

gaetanoM · Answer 1 · 2019-06-13T18:39:31.860

Your main issue is in this line:

var listaCorsi = selezionaCorsoDocenti();

$.get('selezionaCorsiPerDocente',.... is an ajax call, so it's asynchronous. You need to wait in order to get the result.

Moreover, when a change happens you need to empty the dropdown. From:

$('#drpIdCorsi').append(listaCorsiDDL);

to:

$('#drpIdCorsi').empty().append(listaCorsiDDL);

function selezionaCorsoDocenti() {
    var listaCorsi = [{}];
    return $.get('https://gist.githubusercontent.com/gaetanoma/5f06d1dbd111ff6a7778cd6def6b1976/raw/037587e927ac297e1f4907364898ead22ed03a0d/selezionaCorsiPerDocente.json',function(responseJson) {
        responseJson = JSON.parse(responseJson);
        if(responseJson != null) {
            var i = 0;
            $.each(responseJson,function(key,value) {
                listaCorsi[i] = [{nomeCorso: value.nomeCorso}, {emailDocente: value.EMAIL}];
                i = i + 1;
            });
        }
    });
}
selezionaCorsoDocenti().then(function(x) {
    listaCorsi = JSON.parse(x);
    $('#drpDocente').trigger('change');
});

$('#drpDocente').on('change',function(e) {
    var listaCorsiDDL = '';
    docente = $('#drpDocente').val();
    docente = docente.trim();
    docente= docente.split("-")[0];//gets the email of the professor

    if(!$.isArray(listaCorsi))
        listaCorsi = [listaCorsi];
    $.each(listaCorsi,function(key,value) {
        if(docente == value.emailDocente)
            listaCorsiDDL += '<option value="">' + value.nomeCorso + '</option>';
    });
    $('#drpIdCorsi').empty().append(listaCorsiDDL);
});

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


<select id="drpIdCorsi"></select>
<select id="drpDocente">
    <option>docente1@mail.edu</option>
    <option>docente2@mail.edu</option>
    <option>docente3@mail.edu</option>
</select>

Fill DropDown List on selection

1 Answers1