0

Tengo la siguiente funcion $.ajax para armar un arbol de checkboxes y quiero cargar los hijos sólo de los checks que están seleccionados.

var Datos; // almaceno el resultado en esta variable para utilizarlas más adelante.
$.ajax({
    type: 'POST',
    url: '/views/usuarios/index.aspx/obtenerarbolautorizaciones',
    data: "{ 'jdatos': '" + JSON.stringify({ Usuario: usuario }) + "'}",
    contentType: "application/json",
    success: function (data) {
        Datos = null;
        if (data.d != '') {
            Datos = JSON.parse(data.d);
        }
        else
            showError(stringErrorConexion);
    },
    error: function (e) {
        console.log(e.message);
        showError(stringErrorConexion);
    },
    async: false
});

Que me duevuelve lo siguiente:

Array(5)
-0:{key: "0f1", key_padre: "#", title: "sector0", id_tipo_trabajo: "", select: false }
    -children: (8)
        -0:{key: "0f10", key_padre: "0f1", title: "sector01", id_tipo_trabajo: "0f10", select: true }
        -1:{key: "0f11", key_padre: "0f1", title: "sector02", id_tipo_trabajo: "0f11", select: true }
        -2:{key: "0f12", key_padre: "0f1", title: "sector03", id_tipo_trabajo: "0f12", select: true }
        -3:{key: "0f13", key_padre: "0f1", title: "sector04", id_tipo_trabajo: "0f13", select: true }
        -4:{key: "0f14", key_padre: "0f1", title: "sector05", id_tipo_trabajo: "0f14", select: true }
        -5:{key: "0f15", key_padre: "0f1", title: "sector06", id_tipo_trabajo: "0f15", select: true }
        -6:{key: "0f16", key_padre: "0f1", title: "sector07", id_tipo_trabajo: "0f16", select: true }
        -7:{key: "0f17", key_padre: "0f1", title: "sector08", id_tipo_trabajo: "0f17", select: true }
-1:{key: "1f1", key_padre: "#", title: "sector1", id_tipo_trabajo: "", select: false }
    -children: (4)
        -0:{key: "1f10", key_padre: "1f1", title: "sector01", id_tipo_trabajo: "1f10", select: false }
        -1:{key: "1f11", key_padre: "1f1", title: "sector02", id_tipo_trabajo: "1f11", select: false }
        -2:{key: "1f12", key_padre: "1f1", title: "sector03", id_tipo_trabajo: "1f12", select: false }
        -3:{key: "1f13", key_padre: "1f1", title: "sector04", id_tipo_trabajo: "1f13", select: false }
        -4:{key: "1f14", key_padre: "1f1", title: "sector05", id_tipo_trabajo: "1f14", select: false }
-2:{key: "1f2", key_padre: "#", title: "sector2", id_tipo_trabajo: "", select: false }
-3:{key: "1f3", key_padre: "#", title: "sector3", id_tipo_trabajo: "", select: false }
-4:{key: "1f4", key_padre: "#", title: "sector4", id_tipo_trabajo: "", select: false }  

Quiero saber cómo puedo obtener los childrens con la propiedad select = true (que indica que ese check está seleccionado) teniendo en cuenta que los hijos de los hijos también tienen la propiedad select y pueden tener valor true o false.

Se me ocurrió hacer un filter pero no sé como hacerlo con cada hijo (en el siguiente código recorro los padres)

function filtrarData(chkData) {
    if ('select' in chkData && typeof (chkData.select) === true) {
        return true;
    } else {
        return false;
    }
}
dataAutorizaciones.filter(filtrarData); 

UPDATE
En cada iteración, chkData es un padre. Por ejemplo en la primer iteración chkData tiene:

Object(8)
-children: (8)
    -0:{...}
    -1:{...}
    -2:{...}
    -3:{...}
    -4:{...}
    -5:{...}
    -6:{...}
    -7:{...}

Si a este código lo envuelvo en un for para recorrer dataAutorizaciones y tomar cada índice me indica que chkData es undefined.

4
  • que valor tiene chkData??? y cuando te refieres a children? quienes serian los hijos??? puedes usar selectores avanzado #padre > input[type="check"] o publica el html y lo que deseas como resultado!
    – Bryro
    Commented el 21 dic. 2018 a las 16:31
  • chkData toma el valor de cada padre para hacer la iteración y children sí, me refiero a los hijos (dejo el ejemplo de chkdata en el código). No dejé el HTML porque se generan dinamicamente y a esta altura del código todavía no está renderizado, sólo es un span con una clase dynatree-checkbox
    – Pabli770
    Commented el 21 dic. 2018 a las 17:35
  • Puedes poner el objeto "Datos" en formato json para ver cual es la estructura que obtienes en el lado cliente. Commented el 21 dic. 2018 a las 18:18
  • Datos tiene la estructura que dejé debajo de la función $.ajax, el array de 5 posiciones
    – Pabli770
    Commented el 21 dic. 2018 a las 18:43

1 respuesta 1

0

//ASUMIENDO QUE ESTA ES LA ESTRUCTURA QUE TE RETORNA DEL BACKEND

data = [{
    key: "0f1",
    key_padre: "#",
    title: "sector0",
    id_tipo_trabajo: "",
    select: false,
    hijos: [{ key: "0f10", key_padre: "0f1", title: "sector01", id_tipo_trabajo: "0f10", select: true },
            { key: "0f11", key_padre: "0f1", title: "sector02", id_tipo_trabajo: "0f11", select: true },
            { key: "0f12", key_padre: "0f1", title: "sector03", id_tipo_trabajo: "0f12", select: true },
            { key: "0f13", key_padre: "0f1", title: "sector04", id_tipo_trabajo: "0f13", select: true },
            { key: "0f14", key_padre: "0f1", title: "sector05", id_tipo_trabajo: "0f14", select: true },
            { key: "0f15", key_padre: "0f1", title: "sector06", id_tipo_trabajo: "0f15", select: true },
            { key: "0f16", key_padre: "0f1", title: "sector07", id_tipo_trabajo: "0f16", select: true },
            { key: "0f17", key_padre: "0f1", title: "sector08", id_tipo_trabajo: "0f17", select: true }]
},
{
    key: "1f1",
    key_padre: "#",
    title: "sector1",
    id_tipo_trabajo: "",
    select: false,
    hijos: [{ key: "1f10", key_padre: "1f1", title: "sector01", id_tipo_trabajo: "1f10", select: true },
            { key: "1f11", key_padre: "1f1", title: "sector02", id_tipo_trabajo: "1f11", select: false },
            { key: "1f12", key_padre: "1f1", title: "sector03", id_tipo_trabajo: "1f12", select: false },
            { key: "1f13", key_padre: "1f1", title: "sector04", id_tipo_trabajo: "1f13", select: false },
            { key: "1f14", key_padre: "1f1", title: "sector05", id_tipo_trabajo: "1f14", select: false }
    ]
},
{
    key: "1f2",
    key_padre: "#",
    title: "sector2",
    id_tipo_trabajo: "",
    select: false
},
{
    key: "1f3",
    key_padre: "#",
    title: "sector3",
    id_tipo_trabajo: "",
    select: false
},
{
    key: "1f4",
    key_padre: "#",
    title: "sector4",
    id_tipo_trabajo: "",
    select: false
}
];

//ESTA SERÍA LA SOLUCIÓN.
let hijosTrue=[];
// obtener únicamente registros con hijos
let conHijos = data.filter(obj => obj.hijos);

conHijos.map(x => {
   x.hijos.map(y=>{ if(y.select){hijosTrue.push(y)}});    
} )
console.log(hijosTrue)

3
  • Se acerca bastante a lo que busco pero no puedo confirmarlo todavía porque no sé por qué me da "Error de sintaxis" en la expresión lambda tanto en obj => obj.hijos como en el map
    – Pabli770
    Commented el 24 dic. 2018 a las 14:59
  • Es muy probable que falle porque no todos los nodos tienen hijos. Estas intentado buscar el atributo hijo en un objeto que no tiene y te salta el error. Tendrías que crear una validación previa para saber si tiene hijo o no antes de iterar. En mi ejemplo yo lo hago en dos tiempos. Primero extraigo todos los que tiene hijos y luego hago las iteraciones. Saludos Commented el 26 dic. 2018 a las 14:20
  • Si, eso lo veo y lo puedo arreglar pero lo que no entiendo es por qué el .js me da ese error de sintaxis, es como que no reconoce o no acepta las funciones flecha lo cual me parece extraño porque ya las he utilizado anetriormente (no en este proycto) sin problemas.
    – Pabli770
    Commented el 26 dic. 2018 a las 14:37

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.