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

Using jQuery to dynamically insert variables into CSS styles

Is there a way to retrieve the original JSON string from a GWT JavaScriptObject?

Various instances of controllers in Angular.js and JavaScript

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

jQuery document.ready not triggering on second screen on Android device

Primeng - Concealed dropdown values within a scrollable table header

The perfect approach for loading Cordova and Angularjs hybrid app flawlessly using external scripts

What is the best way to conceal a div when there are no visible children using AngularJS?

Optimal Method for Updating Tags Across Three Tables in Node.js and MySQL

Add the appropriate ordinal suffixes ('-st', '-nd', '-rd', '-th') to each item based on its index

Using the AngularJS ui-select component within a custom directive

Encountering an error during the installation of node js when attempting to run npm install

What is the best way to create a series of synchronous HTTP requests using $http in AngularJS?

Is it possible to utilize Angular's $http.get method with a dynamic route

Tips for utilizing the useState Hook in NextJs to manage several dropdown menus efficiently:

Is there a specific regular expression that can be used for validating Credit Card Expiry dates in Javascript/Ang

Unable to initiate the server generated by the express.js generator

Automating the process of populating preferredCountries from intl-tel-input with database output

Vuejs allows objects to trigger the execution of methods through elements

Even though there is an error in the line of code saying "Error in render: RangeError: Invalid array length", it still manages to perform its intended task