4

Estoy usando la función autocompletar de materialize, ¿Cómo hacer para utilizar un JSON local y llenar un select a partir de este?, En la documentación oficial, hay uno solo utilizando un objeto.

data: {
    "Apple": "null",
    "Microsoft": "null",
    "Google": "http://placehold.it/250x250"
}

... y lo que quiero utilizar es algo parecido a esto...

data: [{
    "field": "null",
    "field2": "a",
    "field3": "b",
    "field4": "c"
},
{
    "field": "null",
    "field2": "a",
    "field3": "b",
    "field4": "c"
},
{
    "field": "null",
    "field2": "a",
    "field3": "b",
    "field4": "c"
}]

... pero no funciona, ya intento formateando la información a value, label, así como en jQueryUI, pero tampoco funciona...

var prog = $.map(this._programasService.getProgramas(), function (i)
{
    return {
        label: i.field2,
        value: i.field3
    };
});
1
  • ¿Que es lo que quieres lograr? o ¿cual es el resultado que deseas obtener? los datos de tu arreglo son los mismos en cualquier caso. Commented el 23 oct. 2016 a las 3:20

3 respuestas 3

1

Al final termine por construir un objeto con lo que necesitaba ya que cada valor en mi caso es unico

ngOnInit()
{
    this.programas = this._programasService.getProgramas();

    var program = $.map(this._programasService.getProgramas(), function (i)
    {
        return {
            id: i.prgprg_descripcion,
            text: i.prgprg_nombre
        };
    });

    var arr = {};
    for (var i = 0; i < program.length; i++)
    {
        arr[program[i].id] = program[i].text;
    }


    $(this.el2.nativeElement).autocomplete({
        data: arr
    });
}
1
  • Está muy bien que hayas regresado y publicado como respuesta tu solución. Tu pregunta tiene 3 respuestas pero ninguna aceptada todavía, aunque no es obligatorio, podría decirse que te falta aceptar una.
    – Rubén
    Commented el 26 feb. 2017 a las 17:37
0

Has probado a meter un array dentro de un campo del primer array JSON?

Por ejemplo:

data: [{
    "field1": "null",
    "field2": "a",
    "field3": "b",
    "newData": [{
                "field": "null",
                "field2": "a",
                "field3": "b",
                "field4": "c"
               }]
}]

Ten en cuenta que en newData podrías insertar todos los arrays que necesites claro.

Después podrías acceder de esta forma:

label: i.newData.field2 ;

Espero haberte ayudado. Saludos

0

Como ya habéis comentado, el parámetro data del plugin jQuery autocomplete de materialize necesita un objeto clave-valor.

En cuanto a la transformación del modelo con el que trabajas, puedes utilizar reduce para evitar recorrer el array dos veces y generar un código más compacto.

ngOnInit(){
    this.programas = this._programasService.getProgramas();

    var data = this.programas.reduce(function (accumulator, currentValue){
        accumulator[currentValue.pgrpgr_descripcion] = currentValue.pgrpgr_nombre;
        return accumulator;
    }, {});

    $(this.el2.nativeElement).autocomplete({
        data: data
    });
}

Nota: Tanto map como reduce están ampliamente soportados, por lo que podrías utilizarlos en lugar de la función de jQuery.

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.