3

Estoy teniendo problemas al intentar llenar un dropdown (select) con select2 desde un recurso remoto:

Arreglé mi código backend para que la API devuelva el siguiente código JSON:

[
   {"id":9,"nombre":"Jose"},
   {"id":10,"nombre":"Juan"},
   {"id":11,"nombre":"Rodrigo"},
   {"id":12,"nombre":"Martin"},
   {"id":3,"nombre":"Pablo"},
   {"id":4,"nombre":"Eduardo"},
   {"id":5,"nombre":"Fernando"},
   {"id":13,"nombre":"Sebastian"}
]

Por otro lado, tengo campos que se agregan dinámicamente al presionar un botón "Agregar". Para rellenar cada select2 con los mismo resultados la mejor forma que encontré es:

$('#agregar').click(function (e) {
    e.preventDefault();
    ...
    $(`#nombre_${id}`).select2({
        ajax: {
            url: '/api/nombres',
            processResults: function (data) {
                return {
                    // ¿qué va acá?
                };
            }
        },
        language: 'es',
    });

Por las dudas, hay unos ejemplos pero no son nada específicos: https://select2.github.io/examples.html

¿Cómo debería llamar a la API para que me muestre los resultados como <option value={id}>{nombre}</option> en select2?

Muchas gracias.

Edición 1:

He probado éste ejemplo pero directamente no me carga el select2, sé que el uso de async: false está obsoleto, pero sino no carga el dropdown. Así carga un dropdown vacío (se puede desplegar una lista pero no tiene nombre de las opciones ... ?):

$.ajax({
    url: '/api/nombres',
    method: 'GET',
    async: false,
    success: function (data) {                
        $(`#nombre_${id}`).select2({
            data: data,
            language: 'es'
        });
    }
});

Se ve algo como esto: introducir la descripción de la imagen aquí

2 respuestas 2

4

Basándome en esta respuesta de SOen que es muy similar a lo que tu tienes (esto funciona en Select2 4.0)

Puedes usar la función $.map() de javascript

processResults: function (data) {
  return {
    results: $.map(data, function(obj) {
      return { id: obj.id, text: obj.nombre };
    })
  };
}
3
  • Lo cambié a eso que escribiste y no muestra resultados. Pero gracias.
    – Maramal
    Commented el 19 oct. 2016 a las 13:45
  • @Maramal con la respuesa de juan tienes algun error en la consola?
    – jasilva
    Commented el 19 oct. 2016 a las 14:03
  • No, sólo obtengo un "dropdown" vacío. Sin errores.
    – Maramal
    Commented el 19 oct. 2016 a las 14:05
0

El return de la función processResults debe ser en el mismo formato que los datos que recibe select2. Sería algo como esto:

<code>[{"id":9,"text":"Jose"},
 {"id":10,"text":"Juan"},
 {"id":11,"text":"Rodrigo"},
 {"id":12,"text":"Martin"},
 {"id":3,"text":"Pablo"},
 {"id":4,"text":"Eduardo"},
 {"id":5,"text":"Fernando"},
 {"id":13,"text":"Sebastian"}]
</code>

Tiene que tener id, y text. Otro requerimiento es que sin esto, no te funcionará. Es que en la return tienes que retornar pagination. Tomando tu codigo quedaría algo asi:

$('#agregar').click(function (e) {
    e.preventDefault();
    ...
    $(`#nombre_${id}`).select2({
        ajax: {
            url: '/api/nombres',
            processResults: function (data) {
                return {
                    // ¿qué va acá?
                    return { 
                      // Los datos formateados
                      results: [
                         {"id":9,"text":"Jose"},
                         {"id":10,"text":"Juan"},
                         {"id":11,"text":"Rodrigo"},
                         {"id":12,"text":"Martin"},
                         {"id":3,"text":"Pablo"},
                         {"id":4,"text":"Eduardo"},
                         {"id":5,"text":"Fernando"},
                         {"id":13,"text":"Sebastian"}
                      ],
                      pagination: {
                        // En caso de que no necesites paginar
                        more: false
                      }
                  };
              };
          }
      },
      language: 'es',
});

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.