unusual occurrences with JavaScript - debugging on Google Chrome

There's a bizarre issue happening in my code. An object is being sent correctly by the server, and it's arriving in my angular factory just fine. However, when I log the object, something strange occurs:

https://i.sstatic.net/S6WvC.png

When the object is not expanded, the course_id is an integer and shows as 20. But, when I expand it, it suddenly becomes a string and displays as 19. It's driving me crazy! Has anyone else experienced this issue before? I'm convinced there must be a logical explanation for this madness!

This is my angular service:

   /*********************************
   * get one batch
   *********************************/

  get: function(batch_id) {
    var deferred = $q.defer();
    var request = $http({
      method: 'GET',
      url: ENV.api + 'batch/get/' + batch_id,
      headers: {
        'Content-Type': 'application/json'
      }
    });
    request
      .success(function(result) {
        console.log(result);
        deferred.resolve(result);
      })
      .error(function(error) {
        console.error(error);
        deferred.reject(error);
      });

    return deferred.promise;
  },

Answer №1

After some experimentation, I have found a solution and a potential answer:

https://docs.angularjs.org/api/ng/function/angular.copy

Additionally, I came across this helpful resource:

Why do I need to use angular.copy in my factory?

    /*********************************
   * Fetch a single batch
   *********************************/

  get: function(batch_id) {
    var deferred = $q.defer();
    var request = $http({
      method: 'GET',
      url: ENV.api + 'batch/get/' + batch_id,
      headers: {
        'Content-Type': 'application/json'
      }
    });

    request
      .success(function(result) {
        console.log(angular.copy(result));
        deferred.resolve(angular.copy(result));
      })
      .error(function(error) {
        console.error(error);
        deferred.reject(error);
      });

    return deferred.promise;
  },

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

Attempting to sort through elements in JavaScript

I'm looking to filter specific films based on choices made in the dropdown menus below. <select id="filmDropdown"> <option value="0">All Films</option> <option value="1">Film 1</option> <option ...

Is caching a feature in AngularJS, and are there methods available for disabling it?

var modalInstance = $modal.open({ templateUrl: '/template/edit-modal.html', controller: ModalInstanceCtrl2, resolve: { locations: function () { return locationToEdit; } }, scope: $scope.$new() }); ...

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

I am facing a challenge with my two spans that reveal specific information when clicked. I want to make one span appear as a disabled button (greyed out) when the other span is clicked. I tried using $("#toggle-odd").attr("disabled", tr ...

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

How can I properly reset a timeout duration?

I'm currently working with a function that looks like this: function blabla(){ ... setTimeout(() => { //do some stuff }, 10000) } My question is, how can I reset the time of the timeout (10000) if the function was called and ...

Why is the current Menu Item highlight feature not functioning properly?

Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...

Retrieve the JavaScript object that was initialized within a function

As I venture into the world of working with javascript objects and php objects, I've encountered an issue. While everything seems to be functioning correctly so far, I'm having trouble accessing the javascript object created in the ajax success r ...

Sending data with the request body using Express and Passport

I've created a login application using Express and Passport, but I'm having trouble directing the user to their specific user profile page. The goal is for users to fill out an HTML form and then be redirected to their own profile page (which dif ...

Using Mongoose to increment a sub-document key

I could really use some assistance with the following issue. I'm trying to increment the keys like 'eagle', 'bear', etc. by one in my data model: { "_id" : ObjectId("57e134097a578b11eruogf0a2cb"), "email" : "<a href="/cdn-cgi/l ...

Learn the method to duplicate Outer HTML with the use of jQuery or Pure JavaScript

I have successfully copied the value of an input into the clipboard using the first part of the solution provided. However, I am now trying to figure out how to copy HTML content like an entire <p> tag. Currently, when attempting this, I am encounter ...

displaying a pair of distinct elements using React techniques

I need help adding a react sticky header to my stepper component. When I try to render both components together, I encounter an error. To troubleshoot, I decided to render them separately. Surprisingly, when rendering separately, I do not get the "store is ...

Are you experiencing issues with the cross-origin request failing in react-map-gl?

While setting up a map in react-map-gl and providing my access token, I encountered the following console error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token= ...

"Exploring the world of Typescript's return statements and the

I'm currently grappling with a design dilemma in typescript. Within my controller, I perform a validation process that can either return a 422 response, which ends the thread, or a validated data object that needs to be utilized further. Here's a ...

Steps to deploy a create-react-app-2 build on an IIS server

Currently, I am attempting to deploy a React.js application that was developed with create-react-app (react-scripts v2.1.5) on an IIS server. Despite my best efforts, I continue to encounter frustrating type errors like the ones shown in this image: https ...

receiving an object as the return value in AngularJS

To access locfrnd in the code snippet below, follow these steps: I have created an Array named PlaceCollection containing 2 elements. place locfrnd, which is an array While I was able to successfully access place, I encountered an error when trying to a ...

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...

Wait for AngularJS to load when the background image of a div becomes visible

Currently, I am utilizing the ng-repeat feature to fetch data from a $http.post request and then save it to the $scope.data variable. <div ng-repeat="key in [] | range:data.pages"> <div class="pageBackground" id="page_{{ (key+1) }}" ng-style= ...

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

I am facing difficulties deploying my project on netlify due to NPM errors. Below are the dependencies: "dependencies": { "@angular/animations": "~15.1.1", ... (list of dependencies continues) ...

When attempting to duplicate a project from Bitbucket and working in VS Code, I encountered several errors and warnings while running npm install

I have a project on Bitbucket that I'm trying to clone. The project is quite old, about 3 years old, so some packages may be outdated. However, when I run npm install, I am seeing a lot of warnings and errors. Additionally, the project was originally ...

Sharing Data Between Controllers in AngularJS

I am faced with a challenge involving two Angular controllers: function Ctrl1($scope) { $scope.prop1 = "First"; } function Ctrl2($scope) { $scope.prop2 = "Second"; $scope.both = Ctrl1.prop1 + $scope.prop2; //Ideally, I would like to achieve t ...