AngularJS: How to manipulate DOM with JSON objects created by controllers after the initial load

Question

AngularJS: How to manipulate DOM with JSON objects created by controllers after the initial load

It seems that I may not be following the "Angular Way" as I cannot find similar use cases in the documentation.

In my code, I have an input that takes comma-separated inputs and triggers a function through ng-submit within the weatherController:

$scope.submit = function() {    

    var rawZipString = this.text;
    var strippedString = rawZipString.replace(/\s+/g, '');
    var zipArray = strippedString.split(',');

    for(i=0;i<zipArray.length;i++){
        Weather.getWeatherForecast(zipArray[i])
        .then(function(forecast){
            $scope.temperatures.push(forecast);
        })
    }

    /** Create weather objects */
    for(i=0;i<$scope.temperatures.length;i++){
            var tempForecast = new weatherConstructor(zipArray[i],$scope.temperatures[i]);
            $scope.zipForecast.push(tempForecast);
        }

    /** Format as JSON */
    $scope.DOMdata = angular.toJson($scope.zipForecast);
        console.log($scope.DOMdata);    
    }

This is how weatherConstructor is defined:

function weatherConstructor(zip,temp){
    this.zip = zip;
    this.temp = temp;
}

I am unsure of how to render the constructed JSON object ($scope.DOMdata) in the view, which has the following structure:

<div ng-controller="weatherController">
<h4 ng-repeat="DOM in DOMdata">
    {{DOM.zip}} now is {{DOM.temp}}
</h4>

javascript json angularjs

Answer 1

Answer №1

When working with HTML, make sure to utilize both `ng-model` and `ng-list` to effortlessly convert comma-separated values into an array.

<input type="text" ng-model="text" ng-list>
<div ng-controller="weatherController">
<h4 ng-repeat="DOM in DOMdata">
  {{DOM.zip}} now is {{DOM.temp}}
</h4>

For JavaScript functionality, don't forget to include the `$q` service within your code.

$scope.submit = function () {
  var zipArray = this.text;
  var all = [];
  for (i = 0; i < zipArray.length; i++) {
    var got = Weather.getWeatherForecast(zipArray[i])
      .then(function (forecast) {
        return forecast;
      })
    all.push(got);
  }

  // Ensure all temperatures are retrieved before proceeding
  $q.all(all).then(function(forecasts) {

    // Assign temperatures accordingly,
    // as forecasts may not arrive in order
    $scope.temperatures = forecasts;

    $scope.zipForecast = [];

    for (i = 0; i < $scope.temperatures.length; i++) {
      var tempForecast = new weatherConstructor(zipArray[i], $scope.temperatures[i]);
      $scope.zipForecast.push(tempForecast);
    }

    // No need for toJson here, data is already an object
    $scope.DOMdata = $scope.zipForecast;
    console.log($scope.DOMdata);
  });
}


function weatherConstructor(zip,temp){
  this.zip = zip;
  this.temp = temp;
}

Answer 2

When working with HTML, make sure to utilize both `ng-model` and `ng-list` to effortlessly convert comma-separated values into an array.

<input type="text" ng-model="text" ng-list>
<div ng-controller="weatherController">
<h4 ng-repeat="DOM in DOMdata">
  {{DOM.zip}} now is {{DOM.temp}}
</h4>

For JavaScript functionality, don't forget to include the `$q` service within your code.

$scope.submit = function () {
  var zipArray = this.text;
  var all = [];
  for (i = 0; i < zipArray.length; i++) {
    var got = Weather.getWeatherForecast(zipArray[i])
      .then(function (forecast) {
        return forecast;
      })
    all.push(got);
  }

  // Ensure all temperatures are retrieved before proceeding
  $q.all(all).then(function(forecasts) {

    // Assign temperatures accordingly,
    // as forecasts may not arrive in order
    $scope.temperatures = forecasts;

    $scope.zipForecast = [];

    for (i = 0; i < $scope.temperatures.length; i++) {
      var tempForecast = new weatherConstructor(zipArray[i], $scope.temperatures[i]);
      $scope.zipForecast.push(tempForecast);
    }

    // No need for toJson here, data is already an object
    $scope.DOMdata = $scope.zipForecast;
    console.log($scope.DOMdata);
  });
}


function weatherConstructor(zip,temp){
  this.zip = zip;
  this.temp = temp;
}

Answer 3

Answer №2

In addressing your query regarding the adherence to the "Angular Way" in this code, I'd like to emphasize the importance of simplicity in coding. Angular enables us to manipulate the DOM effectively with straightforward JavaScript, which is one of its key advantages.

It appears there's a misunderstanding about how data interacts with the DOM. In an Angular JS controller, every $scope property is automatically linked to the UI. This means changes made to the property via the DOM or programmatically in the controller will be instantly reflected in the DOM.

For your issue, I recommend keeping the end goal clear. One suggestion is to use $scope.temperatures directly instead of renaming it as DOMdata for better clarity.

<h4 ng-repeat='item in temperatures'>
    {{item.zip}} now is {{item.temp}}
</h4>

To simplify the submit logic in the controller with a target format like:

[{zip: 30224, temp: 30}, {zip: 90210, temp: 33}, {zip: 30695, temp: 28}]

The controller could be structured along these lines:

weatherController = ['$scope', Weather,
    function($scope, Weather) {
        $scope.temperatures = [];
        $scope.text = '';

        $scope.submit = function() {
            this.temperatures = []; // reset
            var zipArray = this.text.replace(/s+/g, '').split(',');
            for(var i = 0; i < zipArray.length; i++) {
                Weather.getWeatherForecast(zipArray[i]).
                then(function(forecast) {
                    $scope.temperatures.push({zip: zipArray[i], temp: forecast});
                });
            }
         };
     }
];

Lastly, consider utilizing filters to modify display values while preserving the original data:

{{item.zip}} now is {{item.temp | degrees}}.

Answer 4

In addressing your query regarding the adherence to the "Angular Way" in this code, I'd like to emphasize the importance of simplicity in coding. Angular enables us to manipulate the DOM effectively with straightforward JavaScript, which is one of its key advantages.

It appears there's a misunderstanding about how data interacts with the DOM. In an Angular JS controller, every $scope property is automatically linked to the UI. This means changes made to the property via the DOM or programmatically in the controller will be instantly reflected in the DOM.

For your issue, I recommend keeping the end goal clear. One suggestion is to use $scope.temperatures directly instead of renaming it as DOMdata for better clarity.

<h4 ng-repeat='item in temperatures'>
    {{item.zip}} now is {{item.temp}}
</h4>

To simplify the submit logic in the controller with a target format like:

[{zip: 30224, temp: 30}, {zip: 90210, temp: 33}, {zip: 30695, temp: 28}]

The controller could be structured along these lines:

weatherController = ['$scope', Weather,
    function($scope, Weather) {
        $scope.temperatures = [];
        $scope.text = '';

        $scope.submit = function() {
            this.temperatures = []; // reset
            var zipArray = this.text.replace(/s+/g, '').split(',');
            for(var i = 0; i < zipArray.length; i++) {
                Weather.getWeatherForecast(zipArray[i]).
                then(function(forecast) {
                    $scope.temperatures.push({zip: zipArray[i], temp: forecast});
                });
            }
         };
     }
];

Lastly, consider utilizing filters to modify display values while preserving the original data:

{{item.zip}} now is {{item.temp | degrees}}.

AngularJS: How to manipulate DOM with JSON objects created by controllers after the initial load

Answer №1

When working with HTML, make sure to utilize both `ng-model` and `ng-list` to effortlessly convert comma-separated values into an array.

For JavaScript functionality, don't forget to include the `$q` service within your code.

Answer №2

Similar questions

Transform an array into an object with a personalized key

Querying JSON data in Postgres using dynamic values

Tips for creating text that adjusts to different screen sizes within a div

Using AJAX requests and $watch in AngularJS purposes

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

Can someone assist me with arranging these divs within my flexbox layout?

Encountering ERR_CONNECTION_RESET in AngularJS and NodeJS when using Nodemailer for POST requests

My goal is to assign unique class names to each button in a list located inside a drawer, allowing them to be called individually when needed

The Restangular back-end call is not being returned in the correct manner

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

Strategies for managing recurring identical HTML content

Tips for showcasing MySQL JSON data

Encountering an Issue with JSON Parsing in Laravel

(Original) redirect from specific url / url detection New text: "Redirection

Dynamic Radio Buttons in AngularJS with Required or Optional Selections

Displaying text when hovering the mouse over an element

Using Java Script variables within Ruby code can be achieved by properly integrating the two languages through

Arranging Data in AngularJS based on Selected Filter Criteria

Is it possible to apply search filters within a child component in Angular?

Issue with Protractor locating element even though everything appears to be in order

AngularJS: How to manipulate DOM with JSON objects created by controllers after the initial load

Answer №1

When working with HTML, make sure to utilize both ng-model and ng-list to effortlessly convert comma-separated values into an array.

For JavaScript functionality, don't forget to include the $q service within your code.

Answer №2

Similar questions

Transform an array into an object with a personalized key

Querying JSON data in Postgres using dynamic values

Tips for creating text that adjusts to different screen sizes within a div

Using AJAX requests and $watch in AngularJS purposes

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

Can someone assist me with arranging these divs within my flexbox layout?

Encountering ERR_CONNECTION_RESET in AngularJS and NodeJS when using Nodemailer for POST requests

My goal is to assign unique class names to each button in a list located inside a drawer, allowing them to be called individually when needed

The Restangular back-end call is not being returned in the correct manner

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

Strategies for managing recurring identical HTML content

Tips for showcasing MySQL JSON data

Encountering an Issue with JSON Parsing in Laravel

(Original) redirect from specific url / url detection New text: "Redirection

Dynamic Radio Buttons in AngularJS with Required or Optional Selections

Displaying text when hovering the mouse over an element

Using Java Script variables within Ruby code can be achieved by properly integrating the two languages through

Arranging Data in AngularJS based on Selected Filter Criteria

Is it possible to apply search filters within a child component in Angular?

Issue with Protractor locating element even though everything appears to be in order

When working with HTML, make sure to utilize both `ng-model` and `ng-list` to effortlessly convert comma-separated values into an array.

For JavaScript functionality, don't forget to include the `$q` service within your code.