Select2 cargar datos del archivo json local

d.abyss

Tengo select2 configurado y trabajando usando una variable JS para cargar los datos, sin embargo, debido a que mis datos tienen muchas opciones (países), me gustaría cargarlos desde un en lugar de tener eso en mi JS.

He creado un archivo countries.json con todos los países y estoy usando el siguiente código para intentar incorporarlos. Sin embargo, aparece el error The results could not be loaded.

Código:

$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
        processResults: function (data) {
            return {
                results: $.map(data, function(obj) {
                    return { id: obj.ime, text: obj.ime };
                })
            };
        }
    },
});

paises.json

[{id:1, text: 'Afghanistan'},
{id:2, text: 'Aland Islands'},
{id:3, text: 'Albania'},

...

{id:245, text: 'Yemen'},
{id:246, text: 'Zambia'},
{id:247, text: 'Zimbabwe'}]
d.abyss

Encontré la solución con la ayuda de @Camille.

  1. Reprocesamiento innecesario del archivo json (solo necesario si su archivo json usa identificadores diferentes a "id"y"text"

  2. El archivo json tenía un formato incorrecto, consulte https://select2.org/data-sources/formats

Código:

// Create countries dropdown
$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
    },
});

paises.json

{
    "results": [
    {
        "id": 1,
        "text": "Afghanistan"
    },
    {
        "id": 2,
        "text": "Aland Islands"
    },
    {
        "id": 3,
        "text": "Albania"
    },

...

    {
        "id": 245,
        "text": "Yemen"
    },
    {
        "id": 246,
        "text": "Zambia"
    },
    {
        "id": 247,
        "text": "Zimbabwe"
    }
    ]
}

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Select2 cargar datos del archivo json local

cargar datos json del archivo local en React JS

No se pueden cargar datos del archivo json local usando jQuery

Cómo cargar datos Json en Select2

Cargar archivo local de datos con fecha

Obteniendo datos del archivo JSON local en angularjs

Mostrar datos del archivo local JSON en HTML

Obtener datos del archivo local

Intentando cargar el archivo JSON local para mostrar datos en una página html usando JQuery

Problemas para cargar datos del archivo JSON en la tabla HTML con la función js

Cargar datos JSON como un archivo

Leer datos del archivo JSON

Obteniendo datos del archivo JSON local usando axios y mostrando datos

C: cargar datos del archivo a la lista vinculada

Cómo cargar datos JSON para usarlos con el complemento select2

Cargar archivo: datos multiformas

Cargar un archivo CSV o Excel junto con datos json a través del formulario React html a Django

¿Cómo cargar un archivo de datos json en una variable en el marco del robot? con

¿Cómo cargar un archivo de datos json en una variable en el marco del robot? con

AngularJS 2: Obtener datos del archivo json no funciona

Yii2 CARGAR DATOS LOCAL INFILE

¿Cómo recuperar datos del archivo JSON local en react native?

No se pueden leer datos del archivo JSON en la carpeta local en Angular 7

Recorrer los datos del archivo JSON local para generarlos en HTML

¿Cómo obtener datos del archivo json local usando acciones y axios.get () (Redux)?

Gráficos de Google - datos del archivo json local - información sobre herramientas personalizadas

MySQL - CARGAR DATOS LOCAL

Formato json incorrecto al cargar datos desde un archivo

Angularjs: cargar contenido desde el archivo json local

TOP Lista

CalienteEtiquetas

Archivo