Dividing a string yields varying outcomes when stored in a variable compared to when it is displayed using console.log()

When the `$location` changes, a simple function is executed as shown below. The issue arises when the assignment of `$location.path().split("/")` returns `["browser"]` for `$location.path() == "/browser"`, but when run directly inside the `console.log`, it returns `["", "browser"]`. How can this discrepancy be logically explained?

angular.module("blah", [])
.controller("navigation", function($scope, $location) {
    var updatePage = function() {
        var temp = $location.path().split("/");
        console.log($location.path(), $location.path().split("/"), temp);
        $scope.page = temp.splice(0,1)[0];
        $scope.args = temp;
        //console.log($scope.page);
    };
    $scope.changePage = function(path) {
        if (path.match("^https?:")) {
            window.location = path;
        } else {
            $location.path(path);
        }
    };
    $scope.args = [];
    $scope.$on("$locationChangeSuccess", function(event, data) {
        updatePage();
    });
    updatePage();
});

Answer №1

It's easy to spot the issue with a code snippet like this:

var temp = $location.path().split("/");
$scope.page = temp.splice(0,1)[0];
...
console.log($location.path(), $location.path().split("/"), temp);

By the time you log it, temp has already been removed using spliced.splice, unlike slice, removes elements from the original array.


UPDATE:

Another possible reason could be:
Firefox, unlike Chrome, does not display the value of the object at the time of logging, but rather a reference to the object (Arrays are objects too). Therefore, any subsequent modification of the Array (like splicing) will also impact the logged object/Array.

If you log JSON.stringify(temp) instead, you should see the expected outcome.

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

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

How can we show a varying number of textfields based on user selection using hooks and updating values dynamically through onChange events?

Currently, I am in the process of setting up a form that includes a Material UI select field ranging from 1 to 50. My challenge is how to dynamically display multiple textfields for "First Name and Last Name" using Hooks each time the user selects a number ...

Attempting to install puppeteer within the Visual Studio Code terminal with financial support

I am having trouble installing puppeteer using the VSC terminal. Every time I try to run the npm install command, it doesn't download and prompts me about funding. Can someone please assist me with this issue? npm i puppeteer up to date, audited 67 p ...

The screen view count remains consistently at zero when using both Google analytics and Single Page Application analytics

Recently, I integrated GA into my most recent project. The web section of the project was built using the angularjs1 framework. I've encountered a peculiar issue. I successfully implemented GA on Android, iOS, and web. However, there seems to be an a ...

Error Handling in ReactJS

Every time I try to execute my ReactJS code, an error pops up saying: Unhandled Rejection (Error): Material-UI: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e2f5f1f3e4d0a1a6bea3bea0">[email protected]</a> ve ...

"Discover the process of incorporating two HTML files into a single HTML document with the help of

I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...

Utilizing $asyncValidators in angularjs to implement error messages in the HTML: A guide

This is my first major form with validations and more. I've set up a Registration form and I'm utilizing ng-messages for validation. The issue arises when I have to check the username, whether it already exists in the JSON server we are using or ...

Is Javascript Profiling a feature available in Firebug Lite?

Exploring the world of JavaScript profiles, I decided to step away from the usual Chrome Developer tools. Can Firebug Lite for Google Chrome provide Javascript Profiling functionality? ...

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

My web application using AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1, and various other CSS and JS libraries worked seamlessly last week. However, today I noticed an issue with the button visualization. To Replicate: Visit openskymap.org to see my d ...

Trigger the fire event on .click() except when text is being selected

I am currently working on a chat box project and I want the input field within the message area to automatically get focused when the user clicks anywhere in the chat box. However, I don't want this functionality to interfere with text selection for c ...

What is the correct syntax for utilizing a variable in inline styles within ReactJS, specifically when working with the --i:0

            The question has been raised previously, but unfortunately, it was left unanswered in this thread. The variables play a crucial role in this piece of code as they are intended to be utilized in various CSS functions for animating them wi ...

Unique form validation process: utilizing JSON

Attempting to validate JSON input using Angular's FormControl. The typical approach, such as validating an email address, would involve: <form name="form"> <textarea ng-model="data.email" type="email" name="email"></textarea> &l ...

Incorporating HTML with ng-binds through transclusion

I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To ...

Having trouble changing the icon in Google Maps during the event?

Seeking guidance with Google API V3 as a newcomer. The task at hand is to switch the icon during a zoom event. Everything works smoothly except for the part where I need to detect the change in zoom and modify the icon from a basic circle to Google's ...

Symfony is unable to access uploaded files from an AngularJS interface

For the past 3 days, I've been grappling with uploading files via AJAX to my Symfony2 application using AngularJS. I'm utilizing my Symfony app as an API to deliver data to my Angular front end. While I can successfully post text and other data, ...

Dragend event for images does not trigger in webkit when using TinyMCE

When using the TinyMCE editor, I tried binding the dragend event on images with the following code: _imagePlugin.editor.dom.bind(_imagePlugin.editor.dom.select('img'), 'dragend', function(){console.log('aaaa');}); Oddly enou ...

Avoid Bootstrap 5 collapse when clicking on links or buttons

In my table, there are parent rows with hidden child rows that can be toggled using the bootstrap collapse feature. Clicking on a parent row toggles the visibility of its child rows. Both parent and child rows can be dynamically added to the table. Parent ...

Shuffling arrays with JavaScript and jQuery for a touch of randomness

Looking to add some variability to your font choices? I've got an idea for you! How about randomizing three arrays for fonts, font size, and font weight? Then, we can display the results of these arrays in a div with the class name "randomFont." Each ...

When the user clicks on an organizational chart, a new organizational chart will appear in a modal popup

Currently, I am developing a project with Highcharts where I have a specific requirement to display a modal popup when a node on an org chart is clicked. The popup should also contain another org chart. Below is the code snippet I am working with: [link to ...

Utilize AngularJS to dynamically alter CSS styles within the header section

I have a selection of template themes, and when one is picked, I need the corresponding CSS file to be changed in the head section. The CSS file has the same name as the theme. I am looking for an Angular solution to achieve this. Here are the designList ...