CODEWITHSUNDEEP
javascriptangularjslocalizationhttp-headers
Grinish Nepal
Grinish Nepal

Reputation: 3063

Append a locale to the request accept-language

I have an angular app where in I need to set the accept-language header to all the ajax call. Currently the browser sends it own accept-language but we have an api which also gives me a locale so the requirement is to append the locale that I got from the api to the existing browser locale.

So the logic in simple terms is:- Accept-Language= "accept-language from browser"+"api call language"

let say brower has en,en-US as its locale and i received es-MX from api so what i need to send is en,en-US,es-MX for all the next api calls.

How will I grab the accept-language that browser is sending with every request.

so far based on what I have read i need to use one of these or all three

window.navigator.userLanguage; 
window.navigator.systemLanguage;
window.navigator.language;

The first two donot even work on chrome/firefox/edge.

navigator.language works perfect in Firefox but in chrome I have no idea where it picks the locale from even though my browser is set to spanish i get en-US but the Accept-header is es and in EDGE i think it picks up the system locale not sure since i there is not option to change the browser locale.

Is there any way i can append my locale to the accept-language that browser sets.

I know that I can set a new one like this but I need to append it to the one that browser sends.

angular.module('myApp', [])
   .config(function($httpProvider) {
      $httpProvider.defaults.headers
        .common['Accept-Language'] = 'es-MX';
});

Any help is appreciated.

Upvotes: 2

Views: 5580

Answers (2)

Tanvi B
Tanvi B

Reputation: 1567

var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

window.navigator.userLanguage is IE only and it's the language set in Windows Control Panel - Regional Options and NOT browser language, but you could suppose that a user using a machine with Window Regional settings set to France is probably a French user.

navigator.language is FireFox and all other browser.

Some language code: 'it' = italy, 'en-US' = english US, etc.

window.navigator.language (Chrome/FF/Safari) returns always browser language and not browser's preferred language, but: "it's pretty common for English speakers (gb, au, nz, etc) to have an en-us version of Firefox/Chrome/Safari." Hence window.navigator.language will still return en-US even if the user preferred language is en-GB

Upvotes: 0

przemod
przemod

Reputation: 459

Please look how angular-translate implements it. It has function determinePreferredLanguage() that according to page https://angular-translate.github.io/docs/#/guide/07_multi-language :

tries to determine by itself what the preferred language would be. It searches for values in the window.navigator object in the following properties (also in this order):

navigator.languages[0]
navigator.language
navigator.browserLanguage
navigator.systemLanguage
navigator.userLanguage

Please use this method on your own risk! Be aware that each browser can return different values on these properties.

I find that function pretty reliable so I suppose you can reimplement that in your app.

Upvotes: 3

Related Questions