0

Tengo el siguiente script el cual mediante el onchange me captura el valor de un dropdownlist que se almacenara en la variable selectval, posterior a esto haciendo uso de Ajax envió el dato capturado a mi método Get_Pieza_Lista que me debería devolver el resultado como se ve en la imagen de debug con un total de 34 resultados, pero al momento de visualizar en la pagina a traves de la consola me visualiza undefined como se ve en la imagen, en teoría al enviar los datos por ajax estaría correcto que vaya entre "" o deberian ir entre '', en la variable data debe ir el nombre de la columna a la que evaluare y que se muestra en la imagen como resultado, que problema causa que me devuelva ese undefined?

 <script>
    $('#MODEL_PRESUPUESTO_PRE_DEN_PAC').change( function () {

        var selectedVal = document.getElementById("MODEL_PRESUPUESTO_PRE_DEN_PAC").value;
        if (selectedVal == "DENTADURA TEMPORAL") {
            selectedVal = "TEMPORAL"
        }
        else if (selectedVal == "DENTADURA ADULTA") {
            selectedVal = "ADULTA"
        }
        alert(selectedVal);
        $.ajax(
            {
                type: "POST",
                dataType: "json",
                url: "/Presupuesto/Get_Pieza_Lista",
                data: { 'PIE_DENT': selectedVal },
                success:
                    function (resul) {
                          // VACIAMOS EL DropDownList
                        $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").empty();
                        //AÑADIMOS UN NUEVO label CON EL NOMBRE DEL ELEMENTO SELECCIONADO
                        $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").append("<option value> -- ESCOGA UNA PIEZA DENTAL " + $("#MODEL_PRESUPUESTO.PRE_PIE_DEN option:selected").text() + " --</option>")
                        // CONSTRUIMOS EL DropDownList A PARTIR DEL RESULTADO Json(data)
                        $.each(resul, function (index, row) {
                            $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").append("<option value='" + row.PIE_ID + "'>" + row.PIE_PIEZA + "</option>")
                        console.log(resul);
                        });
                      
                    }, error:
                    function (e) {
                        alert("ERROR: " + e.message);
                    }
            });
    })
</script>

introducir la descripción de la imagen aquí

Este es la función que devuelve el resultado visualizado en la imagen pero al momento de enviar el dato a mi formulario me arroja undefined pero sin embargo al consultar la variable resul como se ve en la imagen sale el resultado , ahora para que no salga este error al cargar en el combo que debería colocar?

 [HttpPost]
    public JsonResult Get_Pieza_Lista(String PIE_DENT)
    {
        PIE_DENT = "ADULTA";
        Console.WriteLine("RESUL-->" + PIE_DENT);
        var piezalista = _Context.TBL_PIEZA.Where(x => x.PIE_DENT.Equals(PIE_DENT)).OrderBy(x => x.PIE_ID).ToList();
        return Json(piezalista);
    }

introducir la descripción de la imagen aquí

11
  • 1
    ¿Dónde exactamente ocurre el undefined? Cambia esto: console.log(resul.data); por esto: console.log(resul); y dinos qué ocurre.
    – A. Cedano
    el 1 nov. 2021 a las 18:09
  • Si efectivamente, estaba arrojando error al poner .data, me podrías explicar el porque el motivo del error? en que difiere de colocar el data
    – Carrobe90
    el 1 nov. 2021 a las 22:03
  • 1
    Es muy sencillo, si resul no tiene una propiedad llamada data no puedes hacer esto: resul.data. Cuando tú escribes resul.data lo que indicas es: traeme lo que hay en la propiedad llamada data de este objeto y si el objeto no tiene esa propiedad tendrás derecho a un undefined.
    – A. Cedano
    el 1 nov. 2021 a las 22:39
  • Por ultimo me podrías ayudar nuevamente, edite la pregunte ya que al pasar la informacion para que se cargue en el dropdown me arroja undefined :(
    – Carrobe90
    el 1 nov. 2021 a las 22:42
  • 1
    Observa tu salida por consola. Los nombres de propiedad son case sensitive (sensibles a mayúscula/minúscula), por tanto, esto es incorrecto: row.PIE_ID, esa propiedad se llama piE_ID según la imagen, o sea, la p y la i en minúscula. ¿Me explico? Debes escribir cada propiedad respetando las mayúsculas/minúsculas. Si tú escribes row.piE_ID sí encontrará el dato. Y si intentas obtener más propiedades lo mismo, debes respetar las mayúsculas/minúsculas. Cometes el mismo error también aquí: row.PIE_PIEZA, debes cambiarlo por row.piE_PIEZA
    – A. Cedano
    el 1 nov. 2021 a las 22:47

1 respuesta 1

1

Lo que tienes en resul sería la respuesta del servidor. Y, dado que ese objeto no tiene ninguna propiedad data no puedes hacer esto: resul.data, pues tendrás derecho a un undefined.

Por otra parte, las propiedades de objeto son case sensitive (sensibles a mayúscula/minúscula). En la imagen se ve que Ajax está recibiendo el objeto con propiedades como piE_ID, piE_PIEZA etc por tanto debes respetar eso cuando intentes obtener los datos en row.

Por último, no uses nunca append dentro de bucles, es una pésima práctica, porque append() modificaría el DOM en cada iteracción del bucle y esto tiene su coste (cuando el DOM es modificado ocurre una nueva renderización), por eso es mejor concatenar todo en una variable y hacer un solo append() al salir del bucle. Así ocurrirá una sola renderización, no N renderizaciones, según la cantidad de elementos que haya en el bucle.

Aplicando lo dicho, la parte del success quedaría así:

            success:
                function (resul) {
                      // VACIAMOS EL DropDownList
                    $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").empty();
                    var mOptions=`<option value="">-- ESCOGA UNA PIEZA DENTAL ${$("#MODEL_PRESUPUESTO.PRE_PIE_DEN option:selected").text()}--</option>`;
                    // CONSTRUIMOS EL DropDownList A PARTIR DEL RESULTADO Json(data)
                    $.each(resul, function (index, row) {
                        mOptions+=`<option value="${row.piE_ID}">${row.piE_PIEZA}</option>`;
                    });
                    $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").append(mOptions);                     
                }, error:
2
  • Gracias campeón!, un abrazo por toda la ayuda brindada!
    – Carrobe90
    el 1 nov. 2021 a las 23:31
  • @Carrobe90 se me escapó esto: $("#MODEL_PRESUPUESTO_PRE_PIE_DEN").append("<option value> -- ESCOGA UNA PIEZA DENTAL " + $("#MODEL_PRESUPUESTO.PRE_PIE_DEN option:selected").text() + " --</option>"), conviene ponerlo también en mOptions, ahora edito para arreglar ese pequeño despieste.
    – A. Cedano
    el 1 nov. 2021 a las 23:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.