Load localization files with FetchAPI rather than with Ajax

Question

Hi support,in the docs you show how to load the culture files with ajaxhttps://ej2.syncfusion.com/documentation/common/how-to/localization-using-ajax/There is an easier and more recommended way to load external JSON files with the FetchAPI of the browser.Can you please give an example how to do this?My own efforts to do so, did not work :-(Regards,Stephan

Jesus Arockia Sankaran S · Accepted Answer

Hi Stephan, 

Thank you for contacting Syncfusion support.  

We have prepared a simple JavaScript ES5 sample for your reference that you can get form the following link where we copied the required json files from the “cldr-data” package node_modules location to the application root directory.  

Sample: https://www.syncfusion.com/downloads/support/forum/164742/ze/ej2-grid-1183868484 

Code Snippet: 





fetch('./ca-gregorian.json').then(data=> calendarData = data); 
fetch('./numberingSystems.json').then(data=> numberSystemData = data); 
fetch('./currencies.json').then(data=> currenciesData = data); 
fetch('./numbers.json').then(data=> numbersData = data); 
fetch('./timeZoneNames.json').then(data=> { 
    timeZoneNamesData = data; 
    ej.base.loadCldr(calendarData, currenciesData, numberSystemData, numbersData, timeZoneNamesData); 
    ej.base.setCulture('de-DE'); 
    ej.base.setCurrencyCode('EUR'); 
}); 


Also, we can directly include the CLDR json files directly in TypeScript using require as in the below code snippet.  

Sample: https://www.syncfusion.com/downloads/support/directtrac/164742/ze/ej2-ts-webpack764532415 

Code Snippet: 





import { Button } from '@syncfusion/ej2-buttons'; 
declare var require: any; 
import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids'; 
import { data } from './datasource.ts'; 
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base'; 
 
L10n.load({ 
    'de-DE': { 
        'grid': { 
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt', 
            'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte', 
            'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben', 
            'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster', 
            'Item': 'Artikel', 
            'Items': 'Artikel' 
        }, 
        'pager': { 
            'currentPageInfo': '{0} von {1} Seiten', 
            'totalItemsInfo': '({0} Beiträge)', 
            'firstPageTooltip': 'Zur ersten Seite', 
            'lastPageTooltip': 'Zur letzten Seite', 
            'nextPageTooltip': 'Zur nächsten Seite', 
            'previousPageTooltip': 'Zurück zur letzten Seit', 
            'nextPagerTooltip': 'Zum nächsten Pager', 
            'previousPagerTooltip': 'Zum vorherigen Pager' 
        } 
    } 
}); 
loadCldr( 
    require('cldr-data/main/de/ca-gregorian.json'), 
    require('cldr-data/main/de/timeZoneNames.json'), 
    require('cldr-data/main/de/numbers.json'), 
    require('cldr-data/supplemental/numberingSystems.json'), 
    require('cldr-data/main/en/currencies.json') 
); 
setCulture('de-DE'); 
setCurrencyCode('EUR'); 
 
Grid.Inject(Group, Filter, Page, Sort); 
 
let grid: Grid = new Grid({ 
    dataSource: data, 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, 
        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, 
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, 
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } 
    ], 
    height: 175, 
    locale: 'de-DE', 
    allowGrouping: true, 
    allowPaging: true, 
    allowSorting: true, 
    allowFiltering: true 
}); 
 
grid.appendTo('#Grid'); 


Please get back to us if you have any queries. 

Regards, 
Jesus Arockia Sankaran S

Stephan Schrade · Answer

Hello,many thanks for your quick answer.I have entered the following code.(I'm using vanilla js).        // var dataloaded;        fetch('$sourceSyncfusion?>/ej2-locale/src/UserHelper::getLanguageFileSyncfusion();?>')          .then(data => dataloaded = data);        ej.base.L10n.load(dataloaded);        fetch('$sourceSyncfusion?>/cldr-data/main/UserHelper::getLanguageShort();?>/all.json')          .then(data => dataloaded = data);        ej.base.loadCldr(dataloaded);        ej.base.setCulture('UserHelper::getLanguageShort();?>');But this does not work :-(This does not work either        fetch('$sourceSyncfusion?>/cldr-data/main/UserHelper::getLanguageShort();?>/all.json')          .then(data => {              ej.base.loadCldr(data);              ej.base.setCulture('de-DE');              });The components stay at english but have to be in german.It worked with the ajax solution, so there is no error on the rest of the page.Regards,Stephan

Jesus Arockia Sankaran S · Answer

Hi Stephan, 

Thank you for the update. 

We have checked your query and we need to load the required “json” files before calling “setCulture” method. Since fetch API calls are asynchronous, the “json” files are loaded after the “setCulture” call in your code. You can check this by printing the values using console log. you 
 




fetch('$sourceSyncfusion?>/ej2-locale/src/UserHelper::getLanguageFileSyncfusion();?>') 
            .then(data => dataloaded = data); 
        console.log(dataloaded); //it will be empty 
        ej.base.L10n.load(dataloaded); 
        fetch('$sourceSyncfusion?>/cldr-data/main/UserHelper::getLanguageShort();?>/all.json') 
            .then(data => cldrdataloaded = data); 
        console.log(cldrdataloaded); //it will be empty 
        ej.base.loadCldr(dataloaded); 
        ej.base.setCulture('UserHelper::getLanguageShort();?>'); 
 
 
You can notice in our previous update that we have called the “setCulture” method inside the promise of the last call of CLDR data.  
 




fetch('./ca-gregorian.json').then(data=> calendarData = data);  
fetch('./numberingSystems.json').then(data=> numberSystemData = data);  
fetch('./currencies.json').then(data=> currenciesData = data);  
fetch('./numbers.json').then(data=> numbersData = data);  
fetch('./timeZoneNames.json').then(data=> {  
    timeZoneNamesData = data;  
    ej.base.loadCldr(calendarData, currenciesData, numberSystemData, numbersData, timeZoneNamesData);  
    ej.base.setCulture('de-DE');  
    ej.base.setCurrencyCode('EUR');  
});  
 
 
We request you to call the “setCulture” method in properly after you have loaded all required JSON files into the application. Also, you can use the “async-await” to make the fetch API call from asynchronous to synchronous.  
 




 const request = async () => { 
            var calendarData, currenciesData, numberSystemData, numbersData, timeZoneNamesData; 
            calendarData = await fetch('./ca-gregorian.json').then(response => response.json()); 
            numberSystemData = await fetch('./numberingSystems.json').then(response => response.json()); 
            currenciesData = await fetch('./currencies.json').then(response => response.json()); 
            numbersData = await fetch('./numbers.json').then(response => response.json()); 
            timeZoneNamesData = fetch('./timeZoneNames.json').then(response => response.json()); 
            ej.base.loadCldr(calendarData, currenciesData, numberSystemData, numbersData, timeZoneNamesData); 
            ej.base.setCulture('de-DE'); 
            ej.base.setCurrencyCode('EUR'); 
        }; 
        request(); 
 
 
Please get back to us if you have any queries. 
 
Regards, 
Jesus Arockia Sankaran S