A more detailed explanation of Angular's dot notation

Question

A more detailed explanation of Angular's dot notation

I came across a solution for polling data using AngularJS here on stackoverflow.

In this particular solution (shown below), a javascript object is used to return the response (data.response). I tried replacing the data object with a simple javascript array, but it resulted in not working. I am curious as to why I need to use dot notation and why a single array doesn't suffice. It would be great if someone could provide links or explanations supported by examples.

app.factory('Poller', function($http, $timeout) {
  var data = { response: {}, calls: 0 };
  var poller = function() {
    $http.get('data.json').then(function(r) {
      data.response = r.data;
      data.calls++;
      $timeout(poller, 1000);
    });      
  };
  poller();

  return {
    data: data
  };
});

To summarize my goal (what I aim to understand): Can

var data = { response: {}, calls: 0 };

be replaced with var data = {};, setting response.data directly to data = r.data, and return {data: data};? Why must dot notation be relied upon?

javascript angularjs syntax polling ajax-polling

Answer 1

Answer №1

Imagine a scenario where we make a change to the factory in the following manner:

app.factory('Poller', function($http, $timeout) {
  var d = {};
  var poller = function() {
    $http.get('data.json').then(function(r) {
      d = r.data;
      $timeout(poller, 1000);
    });
  };
  poller();

  return d;
});

Within the controller, the line $scope.data = Poller; assigns the d object to $scope.data, establishing the following object relationship upon initialization:

$scope.data -> d -> r.data

Each time poller() is invoked after 1 second, a new object replaces d, resulting in the updated object relationship as follows:

$scope.data -> d* -> r.data (where d* represents a new object)

As a result, AngularJS's data binding becomes disrupted because it cannot track back to r.data due to d* being an entirely different object with a distinct prototype.

By utilizing dot notation, the object relationship remains consistent post-initialization since the repeated calls to poll() do not create a fresh object for d but merely update the response field with a new r.data object.

$scope.data -> d.response -> r.data

Answer 2

Imagine a scenario where we make a change to the factory in the following manner:

app.factory('Poller', function($http, $timeout) {
  var d = {};
  var poller = function() {
    $http.get('data.json').then(function(r) {
      d = r.data;
      $timeout(poller, 1000);
    });
  };
  poller();

  return d;
});

Within the controller, the line $scope.data = Poller; assigns the d object to $scope.data, establishing the following object relationship upon initialization:

$scope.data -> d -> r.data

Each time poller() is invoked after 1 second, a new object replaces d, resulting in the updated object relationship as follows:

$scope.data -> d* -> r.data (where d* represents a new object)

As a result, AngularJS's data binding becomes disrupted because it cannot track back to r.data due to d* being an entirely different object with a distinct prototype.

By utilizing dot notation, the object relationship remains consistent post-initialization since the repeated calls to poll() do not create a fresh object for d but merely update the response field with a new r.data object.

$scope.data -> d.response -> r.data

A more detailed explanation of Angular's dot notation

Answer №1

Similar questions

The configuration for CKEditor5's placeholder feature seems to be malfunctioning

Pressing the shortcut key will activate the function specified in ng-click,

Navigating a variety of page styles and views in Angular 1 using routing

Interacting with a third-party application via OAuth using Node server to send REST requests

Increasing the size of a background image as you scroll

Press and hold feature using CSS or JavaScript

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

What steps can we take to create a personalized PDF editor incorporating our unique edit functionalities using Vue.js?

Validating AngularJS form upon submission

Move information from one page to another

Is there a way to handle the ajax request only when necessary, instead of processing it every few seconds?

Having some trouble creating a ping command in discord.js that displays latency; encountered this error message

Using jest.fn() to simulate fetch calls in React

The function app.post in Express Node is not recognized

Create a dynamic animation page using Node.js, then seamlessly redirect users to the homepage for a smooth user

Determine the vertical dimension of an element through a JavaScript event listener

Yet another error encountered: "Headers cannot be set after they have already been sent to the client" when submitting the form

transmitting error messages from a service to a controller in AngularJS

Iterate over each option in a select dropdown menu and modify them

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image