1

Estoy intentando realizar una consulta AJAX y guardar esta en un type, pero siempre me devuelve 'undefined'

export class MyClass {
    lang;
    constructor(
        private translate: TranslateService
    } {
        this.lang = this.translate.loadLang ( 'nav' );
    }
}

TranslateService esta importado en la cabecera, cuando hago depuración, en XHR me hace la consulta perfectamente y devuelve un json, pero cuando hago un console.log del type lang siempre me devuelve 'undefined'. La idea es importar archivos de idioma desde un servidor externo. CORS está bien configurado y el JSON se devuelve correctamente, pero no consigo almacenar la información.

Este es el código que hay dentro de TranslateService (no uso 'ngx-translate')

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import * as $ from 'jquery';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {

  constructor(
    private storage: Storage
  ) { }

  setDefaultLanguage () {

    this.storage.get ( 'lang' ).then ( ( ln ) => {

        if ( ln != '' || ln != null || ln != 'undefined' ) {

            return ln;

        }

    } );

    var l = navigator.language.substr ( 0, 2 );
    var s = this;

    this.storage.get ( 'login' ).then ( ( lo ) => {

        if ( lo == '' || lo == null || lo == 'undefined' ) {

            $.post ( 'https://url/core/ajax/app/getLanguage', { v : l }, function ( d ) {

                if ( d.is ) {

                    s.storage.set ( 'lang', l );

                } else {

                    s.storage.set ( 'lang', 'es' );
                    l = 'es';

                }

            }, 'json' );

        } else {

            $.post ( 'https://url/core/ajax/app/getUserInfo', { v : lo }, function ( d ) {

                s.storage.set ( 'lang', d.lang );
                l = d.lang;

            }, 'json' );

        }

    } );

    return l;

  }

  loadLang ( file ) {

    this.storage.get ( 'lang' ).then ( ( v ) => {

        if ( v == '' || v == null || v == 'undefined' ) {

            return this.setDefaultLanguage();

        } else {

            $.post ( 'https://url/lang/' + v + '/' + file + '?app', function ( d ) {

                return d;

            }, 'json' );

        }

    } );

  }

}
7
  • ¿Estás usando ngx-translate? Si no es así, necesitaría ver el código de TranslateService Commented el 12 nov. 2019 a las 11:38
  • @PabloLozano he actualizado y muestro el código dentro de TranslateService Commented el 12 nov. 2019 a las 12:41
  • 3
    Me sorprende que estés usando jQuery para realizar llamadas AJAX, deberías aprender a usar HttpClient, de Angular Commented el 12 nov. 2019 a las 12:45
  • 1
    Como de comenta Pablo Lozano deberías estar usando HttpClient pues estas usando ionic con angular, creo que existe la forma para que uses(ionic) con javascript vanilla pero preferible usar angular para eso.
    – DavElsanto
    Commented el 12 nov. 2019 a las 13:46
  • 1
    Te dejo un consejo que considero de lo más valioso cuando empecé con Angular: olvídate de que existe jQuery. Aprende a hacer las cosas a la manera Angular y pronto no lo echarás de menos, hasta te resultará engorroso tenerlo. Pregunta lo que necesites, lee preguntas y respuestas en SOes sobre Angular (yo tengo ya bastantes escritas) y aprende a manejar observables a un nivel básico (se puede complicar todo lo que quieras/necesites). Commented el 12 nov. 2019 a las 14:21

1 respuesta 1

1

Vamos a analizar el método en tu servicio:

  loadLang(file) {
    this.storage.get('lang').then((v) => {
      if (v == '' || v == null || v == 'undefined') {
        return this.setDefaultLanguage();
      } else {
        $.post('https://url/lang/' + v + '/' + file + '?app', function (d) {
          return d;
        }, 'json');
      }
    });
  }

Asumamos que this.storage.get(...) devuelve correctamente una promesa. Cuando obtenemos los datos de dicho método, si v tiene datos válidos se hace una llamada AJAX. Esa llamada AJAX, al completarse, ejecuta una función... que realmente no hace nada porque lo que devuelve es ignorado.

Podrías hacer algo como lo siguiente:

loadLang(file) {
    let prom = this.storage.get('lang')
      .then((v) => {
      if (v == '' || v == null || v == 'undefined') {
        return this.setDefaultLanguage();
      } else {
        return fetch('https://url/lang/' + v + '/' + file + '?app',{method: 'POST'})
          .then(response -> response.json());
      }
    });
   return prom;
  }

Y de este modo no necesitas usar jQuery, usarías las promesas estándar del navegador.

En tu componente podrías hacer algo como:

this.translate.loadLang( 'nav' ).then(data => this.lang = data);

De todos modos sería mejor que usaras Observables, trabajando con componentes de Angular el uso de programación reactiva (RxJS) es inevitable, es mejor aceptarlo cuanto antes.

1
  • me da el siguiente error. ERROR in src/app/services/translate.service.ts:77:34 - error TS1109: Expression expected. [ng] 77 .then ( response -> response.json () ); Commented el 13 nov. 2019 a las 20:25

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.