Angular2 waits for the JSON file to be fully loaded before proceeding

Question

Angular2 waits for the JSON file to be fully loaded before proceeding

At the moment, I am loading a JSON file in the following way:

translation.service.ts

@Injectable()
export class TranslationService {

    private _messages = [];

    constructor(private _http: Http) {
        var observable = this._http.get("/app/i18n/localizable.it.strings").map((res: Response) => res.json());
        observable.subscribe(res => {
            this._messages = res;
        });
    }

    getTranslationByKey(key: string, args?: any[]) {
        return this._messages[key];
    }
}

localizable.it.strings

{
    "home.nav.calendar": "Calendar",
    ...
}

My TranslationService is injected into my HomeComponent, but the issue arises when trying to access these values through a pipe before they are fully loaded during page rendering.

translate.pipe.ts

@Pipe({name: 'translate'})
export class TranslatePipe implements PipeTransform {

    constructor(private _translation: TranslationService) {}

    transform(value: string, args: string[]) : any {
        return this._translation.getTranslationByKey(value);
    }
}

Is there a solution to load all values from a JSON file prior to any page being rendered?

javascript json typescript angular

Answer 1

Answer №1

To enhance your service and streamline data handling, consider incorporating a mechanism to detect when data is ready or loaded automatically.

Start by introducing an observable that alerts when the data has been loaded into your service:

@Injectable()
export class TranslationService {

  private _messages = {};

  private translationLoaded : Observable<boolean>;
  private translationLoadedObserver : Observer<boolean>;

  constructor(private _http: Http) {
    this.translationLoaded = Observable.create((observer) => {
      this.translationLoadedObserver = observer;
    });

    var observable = this._http.get("app/i18n/localizable.it.strings").map((res: Response) => res.json());
    observable.subscribe(res => {
      this._messages = res;
      this.translationLoadedObserver.next(true);
    });
  }

  getTranslationByKey(key: string, args?: any[]) {
    return this._messages[key];
  }
}

The pipe can then subscribe to this observable to seamlessly update the message value similar to how the async function works:

@Pipe({
  name: 'translate',
  pure: false  // required to update the value when data are loaded
})
export class TranslatePipe implements PipeTransform {
  constructor(private _ref :ChangeDetectorRef, private _translation: TranslationService) {
    this.loaded = false;
  }

  transform(value: string, args: string[]) : any {
    this.translationLoadedSub = this._translation.translationLoaded.subscribe((data) => {
      this.value = this._translation.getTranslationByKey(value);
      this._ref.markForCheck();
      this.loaded = true;
    });

    if (this.value == null && this.loaded) {
      this.value = this._translation.getTranslationByKey(value);
    }
    return this.value;
  }

  _dispose(): void {
    if(isPresent(this.translationLoadedSub)) {
      this.translationLoadedSub.unsubscribe();
      this.translationLoadedSub = undefined;
    }
  }

  ngOnDestroy(): void {
    this._dispose();
  }
}

You can view the live implementation on Plunker here: https://plnkr.co/edit/VMqCvX?p=preview.

Answer 2

To enhance your service and streamline data handling, consider incorporating a mechanism to detect when data is ready or loaded automatically.

Start by introducing an observable that alerts when the data has been loaded into your service:

@Injectable()
export class TranslationService {

  private _messages = {};

  private translationLoaded : Observable<boolean>;
  private translationLoadedObserver : Observer<boolean>;

  constructor(private _http: Http) {
    this.translationLoaded = Observable.create((observer) => {
      this.translationLoadedObserver = observer;
    });

    var observable = this._http.get("app/i18n/localizable.it.strings").map((res: Response) => res.json());
    observable.subscribe(res => {
      this._messages = res;
      this.translationLoadedObserver.next(true);
    });
  }

  getTranslationByKey(key: string, args?: any[]) {
    return this._messages[key];
  }
}

The pipe can then subscribe to this observable to seamlessly update the message value similar to how the async function works:

@Pipe({
  name: 'translate',
  pure: false  // required to update the value when data are loaded
})
export class TranslatePipe implements PipeTransform {
  constructor(private _ref :ChangeDetectorRef, private _translation: TranslationService) {
    this.loaded = false;
  }

  transform(value: string, args: string[]) : any {
    this.translationLoadedSub = this._translation.translationLoaded.subscribe((data) => {
      this.value = this._translation.getTranslationByKey(value);
      this._ref.markForCheck();
      this.loaded = true;
    });

    if (this.value == null && this.loaded) {
      this.value = this._translation.getTranslationByKey(value);
    }
    return this.value;
  }

  _dispose(): void {
    if(isPresent(this.translationLoadedSub)) {
      this.translationLoadedSub.unsubscribe();
      this.translationLoadedSub = undefined;
    }
  }

  ngOnDestroy(): void {
    this._dispose();
  }
}

You can view the live implementation on Plunker here: https://plnkr.co/edit/VMqCvX?p=preview.

Answer 3

Answer №2

Instead of striving for synchronous code, it is advisable to let the TranslationService notify you once it's prepared:

export class TranslationService {
    // ...

    get readyStatus() {
        return !!this._messages;
    }
}

Subsequently, the pipe can deliver translations only when the _messages property is populated.

export class TranslatePipe implements PipeTransform {
    // ...

    transform(value: string, args: string[]) : any {
        return this._translation.readyStatus
            ? this._translation.getTranslationByKey(value) : null;
    }
}

Answer 4

Instead of striving for synchronous code, it is advisable to let the TranslationService notify you once it's prepared:

export class TranslationService {
    // ...

    get readyStatus() {
        return !!this._messages;
    }
}

Subsequently, the pipe can deliver translations only when the _messages property is populated.

export class TranslatePipe implements PipeTransform {
    // ...

    transform(value: string, args: string[]) : any {
        return this._translation.readyStatus
            ? this._translation.getTranslationByKey(value) : null;
    }
}

Angular2 waits for the JSON file to be fully loaded before proceeding

Answer №1

Answer №2

Similar questions

ReactJS - Code runs flawlessly on initial execution

Enhanced Slider Display featuring Multiple Posts for Improved Performance

Retrieve LatLng coordinates for a Heatmap on Google Maps using data stored in a MySQL database

Update the color of the text depending on the background color

Find the MD5 hash of the image uploaded using Java WebDriver

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

How to reference an image source using a relative path in jQuery qTip

Conceal THREE.Mesh using dat.gui controls

Tips for adjusting a JavaScript object using attribute names stored in an array

Modifying the default value script to function across various rows

Dynamically updating the scroll area in Ionic using real-time data

An Ajax GET request will not be able to locate the JSON file

Is it necessary to encapsulate the last Typsecript export in a module?

Eliminate records using Angular combined with PHP

Is There a Name Clash Issue with Dependency Injection in AngularJS?

Differentiating between model types and parameters in Prisma can greatly enhance your understanding of

Oops! An error occurred while trying to find the _mongodb._tcp.blog-cluster-0hb5z.mongodb.net. Please check your query settings and try again

Decoding JSON - JavaScript - null value

Tips for organizing classes in a Node module

Could a website potentially generate enough heat to speed up the draining of a Android device's battery?