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>