app.js is not properly identifying the navigator's language

This is the code snippet for my controller

app.controller('languagesCtrl', function($scope) {
  var lang = window.navigator.language || window.navigator.userLanguage;
  if (lang === 'it' || 'it-it' || 'it-IT') {
    $scope.showcase = 'Vetrina';
    $scope.products = 'Prodotti';
    $scope.cta = 'Nuova collezione strumenti';
  } else {
    $scope.showcase = 'Showcase';
    $scope.products = 'Products';
    $scope.cta = 'Check out new products!';
  }
});

Despite being certain that my navigator language is not 'it-IT' (verified here), the angular-based website does not utilize the content within the else statement.

Answer ā„–1

Your statement will always hold true due to the specific use of the || operator.

Upon evaluation of the expression:

The first part (lang === 'it') can either be true or false, let's say it is false.

Therefore, the expression transforms into (false || 'it-it' || 'it-IT'), which will consistently return the next value in line, in this case it-it. Thus, the condition will always be met regardless.

Modify it as follows:

if (lang === 'it' || lang === 'it-it' || lang === 'it-IT')

OR a more simplified version:

if (['it','it-it','it-IT'].indexOf(lang) > -1)

Answer ā„–2

ES6 provides an elegant solution for this

I thought I'd leave this here in case someone comes across it in the future. Utilize includes() with ES6.

['it','it-it','it-IT'].includes(language)

ES5 Approach

This used to be a stumbling block for me until I realized that I was using multiple OR comparisons incorrectly. So, I decided to improve readability by doing the following:

Array.prototype.contains = function(obj) {
    return this.indexOf(obj) > -1;
};

Now, you can implement it like this:

var language = $window.navigator.language.

if (['it','it-it','it-IT']].contains(language)) {
    alert('yes');
}

This is much easier to understand. And if you're using underscore.js, they offer the following helper function.

_.contains([], search)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function successfully triggers when clicked using (React, JS, TS) but does not respond to key presses

When the function is called with "onClick", it works correctly, but when called with "onKeyPress", it does not execute an if statement. scenario Consider a scenario where you can search for food recipes (e.g. "pizza") and receive a list of recipes from a ...

How can I edit this code in JSPDF to print two pages instead of just one?

Currently, I have a script that can generate a PDF from one DIV, but now I need to create a two-page PDF from two separate DIVs. How can I modify the existing code to achieve this? The first DIV is identified as #pdf-one and the second DIV is #pdf-two. p ...

What is the best way to customize the spacing of grid lines in chartist.js?

I am struggling with chartist.js. I want to increase the spacing between y-axis gridlines by 40px. (Currently set at 36px) I have tried looking for examples, but haven't found any. .ct-grids line { stroke: #fff; opacity: .05; stroke-dasharray: ...

Tips for toggling the display of multiple ion-input fields based on the selected value from an ion-select dropdown

I am working with an ion-select element that contains options from 1 to 10. <ion-label> Select how many input fields</ion-label> <ion-select> <ion-option value="0"> Zero</ion-option> <ion-option value="1"> One</ion- ...

Vows, Tobi, and Node.js come together for comprehensive REST API testing

Currently, I am in the process of merging the examples here and here to create a vows test for my node.js / express application that does the following: Creates a new user object Verifies that the response is correct Utilizes the returned _id to perform ...

Checking two promises in AngularJS to ensure they have both returned successfully

I am faced with a scenario where I need to execute actions as each promise returns individually, and perform another action once both promises have returned successfully. promise1.then(function() { // do something }) promise2.then(function() { // do some ...

Enhance User Experience by Updating Status on Checkbox Selection in PHP

I am working with a datatable and I have created a table using datatables. How can I change the status field when a checkbox is clicked? The default status is 'before', but when the checkbox is clicked, it should update to 'after' in th ...

utilizing axios encoding settings within vue.js

I am currently utilizing vue.js along with axios to retrieve data from an API endpoint. The specific URL I require is structured like this: https://base_url.com?f=json&where=&returnGeometry=false&spatialRel=esriSpatialRelIntersects&geometr ...

Issue with Jest while testing a React component library that has been bundled without the React library

I have extensive experience building React applications and decided to create a React Component library. After researching different approaches, I chose to use Webpack and Babel for bundling without including React itself in the library. This decision was ...

How can the define function help in AngularJS?

At times, I come across code in Angular that resembles the following: define(['angular', 'module'], function (angular, module) { //... }); I'm left wondering what this code snippet does. Despite my efforts to search for "angula ...

Error in jQuery when trying to access the src attribute of an image: "undefined src

Just started delving into jQuery. I'm trying to grab the image source and showcase it in a fixed division like a pop-up, along with the image title. However, I'm encountering difficulties in fetching the image source. My attempt with the .attr() ...

Troubleshooting: Issue with passing parameters in Wordpress ajax function

In my Wordpress Ajax implementation, I am facing an issue where the parameter value metakey: id is not being passed to $_POST["metakey"]. As a result, when I do a var_dump($_POST), it shows array(0) { }. If I manually set a static value for the variable i ...

In Internet Explorer 11, the Content-Type setting is not functional and may cause issues with certain functionalities

My initial attempt to solve the issue involved using the method beginQuoteFileUnquoteUpload1, which created a proper boundary and Content-Type. However, upon receiving the file, I discovered that it was corrupted :( var formData = new FormData(); formD ...

`To transfer the selected radio button value to a different form field using jquery, follow these steps.`

I need to set either the value no or 1 for the input field name="auth[]" below. <td> send <input type="radio" name="authorized[]'.$c.'" id="send'.$c.'"value="1" checked> </td> <td> no <input label=" ...

What are the steps needed to establish a distinct data scope in AngularJS along with the application of filters?

Iā€™m currently practicing my skills in AngularJS and I have been experimenting with creating reusable components. At this stage, I have successfully created a component using the directive method. However, I now have some doubts that I need clarification ...

How can I correctly export my npm package?

I have successfully developed an npm package. class Person { constructor() {} sayHello() {console.log("Hello World!")} } module.exports = Person; Upon installing the package using npm i my-package, it was integrated into my project. ...

Creating a JQuery statement to conditionally change CSS values

Is there a way to determine if a div element with a CSS class of "x" has a height set to "auto"? If so, I would like a jQuery script to remove the CSS class "a" from all elements with the class "y". If not, the script can remain unchanged. Thank you. ...

Learn how to design a customized loading screen using CSS with Phonegap

Currently working in Android with Phonegap / Cordova, I am faced with the challenge of optimizing page loading time due to numerous DOM objects being created. To address this issue, I am attempting to implement a "Loading..." screen to prevent users from b ...

What is the optimal approach for managing multiple languages using React Router version 5?

I am exploring the possibility of incorporating multiple languages into my website using React and React Router v5. Can you provide guidance on the most effective approach to achieve this? Below is a snippet of the current routing code I am working with: ...

"Troubleshooting the path problem in Vue.js router version 3.0.1

Encountered an unexpected issue and seeking assistance for resolution. Below is a snippet of the route configuration that I am currently dealing with: routes: [ { path: '/signin', name: 'signin', component: SignIn }, ...