3

Siguiendo la documentación intento lo siguiente:

var data = {
  "results": [
    {
      "text": "Life Good",
      "children": "[{\"id\" : 1, \"text\" : \"Lg Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 2, \"text\" : \"Lg Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
      "elment": HTMLOptGroupElement
    },
    {
      "text": "Samsung",
      "children": "[{\"id\" : 3, \"text\" : \"Samsung Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 4, \"text\" : \"Samsung Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
      "elment": HTMLOptGroupElement
    }
  ],
  "pagination": {
    "more": false
  }
};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

Pero no me muestra los hijos, los cuales son reflejados en el json como children.

Acá un ejemplo de lo que quiero pero no es con ajax.

1 respuesta 1

1

La solución fue modificar el código que generaba en PHP los datos para ser enviados al navegador y hacer una decodificación del JSON devuelto por la base de datos para poder integrarse con el resto de datos de PHP que son posteriormente convertidos a JSON:

<?php
/* Reproducimos los datos obtenidos de la base de datos */
$valores = [
    0 => (object)[
        'text' => 'Life Good',
        'children' => '[{"id" : 1, "text" : "Lg Prueba 1"}, {"id" : 2, "text" : "Lg Prueba 2"}]',
    ],
    1 => (object)[
        'text' => 'Samsung',
        'children' => '[{"id" : 3, "text" : "Samsung Prueba 1"}, {"id" : 4, "text" : "Samsung Prueba 2"}]',
    ],
];
?><h3>ANTES:</h3>
<pre><?= htmlspecialchars(
  json_encode($valores, JSON_PRETTY_PRINT)
) ?></pre>
<?php
foreach($valores as $clave => $elemento) {
    $valores[$clave]->children = json_decode($valores[$clave]->children);
}
?><h3>DESPUÉS:</h3>
<pre><?= htmlspecialchars(
  json_encode($valores, JSON_PRETTY_PRINT)
) ?></pre>

Dando como resultado:

ANTES:
[
    {
        "text": "Life Good",
        "children": "[{\"id\" : 1, \"text\" : \"Lg Prueba 1\"}, {\"id\" : 2, \"text\" : \"Lg Prueba 2\"}]"
    },
    {
        "text": "Samsung",
        "children": "[{\"id\" : 3, \"text\" : \"Samsung Prueba 1\"}, {\"id\" : 4, \"text\" : \"Samsung Prueba 2\"}]"
    }
]

DESPUÉS:
[
    {
        "text": "Life Good",
        "children": [
            {
                "id": 1,
                "text": "Lg Prueba 1"
            },
            {
                "id": 2,
                "text": "Lg Prueba 2"
            }
        ]
    },
    {
        "text": "Samsung",
        "children": [
            {
                "id": 3,
                "text": "Samsung Prueba 1"
            },
            {
                "id": 4,
                "text": "Samsung Prueba 2"
            }
        ]
    }
]

El trabajo se realiza en el siguiente bucle tras la obtención de los datos:

foreach($valores as $clave => $elemento) {
    $valores[$clave]->children = json_decode($valores[$clave]->children);
}

En el que decodificamos los datos del campo children de cada registro devuelto para que pasen de ser un texto normal a datos reales que puedan ser tratados como tales más adelante por el json_encode que envía el contenido al código javascript que se ejecutará en el navegador.


Respuesta original

Tienes los datos children codificados en JSON como cadena. O bien usas un JSON.parse() para convertirlos de vuelta en datos reales o bien lo haces manualmente de la siguiente manera:

var data = {
  "results": [
    {
      "text": "Life Good",
      "children": [
        {
          "id" : 1,
          "text" : "Lg Prueba 1",
          "element" : HTMLOptionElement
        },
        {
          "id" : 2,
          "text" : "Lg Prueba 2",
          "element" : HTMLOptionElement
        }
      ],
      "element": HTMLOptGroupElement
    },
    {
      "text": "Samsung",
      "children": [
        {
          "id" : 3,
          "text" : "Samsung Prueba 1",
          "element" : HTMLOptionElement
        },
        {
          "id" : 4,
          "text" : "Samsung Prueba 2",
          "element" : HTMLOptionElement
        }
      ],
      "element": HTMLOptGroupElement
    }
  ],
  "pagination": {
    "more": false
  }
};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>


Ejemplo volcando el JSON directamente desde la base de datos

Si no realizas ningún tipo de escapado del resultado que obtienes de la base de datos, puedes usar la información obtenida de manera directa.

var data = {
  "results": [
    {
      "text": "Life Good",
      "children": [{"id":1,"text":"LG-001"},{"id":2,"text":"LG-002"},{"id":3,"text":"LG-003"}],
      "element": HTMLOptGroupElement
    },
    {
      "text": "Samsung",
      "children": [{"id":4,"text":"Sam-004"},{"id":5,"text":"Sam-005"},{"id":6,"text":"Sam-006"}],
      "element": HTMLOptGroupElement
    }
  ],
  "pagination": {
    "more": false
  }
};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>


Ejemplo usando JSON.parse() de las cadenas obtenidas de la base de datos

Si escapas la cadena (o usas json_encode o funciones similares en el lado del servidor) en el resultado que obtienes de la base de datos, debes usar JSON.parse() para volver a convertir los datos en útiles para javascript.

var data = {
  "results": [
    {
      "text": "Life Good",
      "children": JSON.parse("[{\"id\":1,\"text\":\"LG-001\"},{\"id\":2,\"text\":\"LG-002\"},{\"id\":3,\"text\":\"LG-003\"}]"),
      "element": HTMLOptGroupElement
    },
    {
      "text": "Samsung",
      "children": JSON.parse("[{\"id\":4,\"text\":\"Sam-004\"},{\"id\":5,\"text\":\"Sam-005\"},{\"id\":6,\"text\":\"Sam-006\"}]"),
      "element": HTMLOptGroupElement
    }
  ],
  "pagination": {
    "more": false
  }
};


$("select").select2({
  placeholder: "Elija...",
  allowClear: true,
  data: data.results,
  templateResult: function (data) {    
    // We only really care if there is an element to pull classes from
    if (!data.element) {
      return data.text;
    }

    var $element = $(data.element);

    var $wrapper = $('<span></span>');
    $wrapper.addClass($element[0].className);

    $wrapper.text(data.text);

    return $wrapper;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

7
  • ¿Como hago si el json lo traigo asi de la db?
    – bypabloc_
    Commented el 9 may. 2017 a las 8:22
  • 1
    Entonces hay que usar JSON.parse(). Te voy a poner un ejemplo de cómo hacerlo así. Commented el 9 may. 2017 a las 8:24
  • 1
    Acá la demostración de como consulto a la db.
    – bypabloc_
    Commented el 9 may. 2017 a las 8:24
  • Ya está, mira los resultados. ¿Qué usas en el lado del servidor para enviar esa información al navegador? Commented el 9 may. 2017 a las 8:33
  • json_encode el json que obtengo del lado del cliente es el que coloque en la pregunta. ¿Como puedo insertarle el JSON.parse() a cada children?
    – bypabloc_
    Commented el 9 may. 2017 a las 8:36

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.