What are the similarities between using the map function in AngularJS and the $map function in jQuery?

I am currently in the process of migrating jQuery code to AngularJS. I have encountered some instances where the map function is used in jQuery, and I need to replicate the same functionality in AngularJS. Below is the code snippet that demonstrates this. Additionally, the variable self.series contains a JSON response.

alert("before map function"+JSON.stringify(self.series));   
      $.map(self.series, function(serie) {
        serie.color = last_point_color = self.color(serie.name);
        $.map(serie.data, function(statistic) {
          // need to parse each date'
          //alert("x"+statistic.x);
          statistic.x = d3.time.format.utc('%Y-%m-%dT%H:%M:%S').parse(statistic.x);
          //alert("statistic_x="+statistic.x);
          statistic.x = statistic.x.getTime() / 1000;
          //alert("statistic_x/1000="+statistic.x);
          last_point = statistic;
          //alert("last_point="+last_point.x);  
          // last_point=1437541894
          last_point.color = serie.color;
        });
      });
      alert("After map function"+JSON.stringify(self.series));   

Alert Before calling map

          before map function[{"meter":"instance","data":[
          {"y":1,"x":"2015-07-22T05:01:33"}, {"y":1,"x":"2015-07-23T05:01:34"},
          {"y":1,"x":"2015-07-24T05:01:34"}, {"y":1,"x":"2015-07-25T05:03:39"},
          {"y":1,"x":"2015-07-26T02:43:39"}, {"y":1,"x":"2015-07-28T04:58:54"}],
          "name":"demo","unit":"instance"}]

After calling Map

          After map function[{"meter":"instance","data":[{"y":1,"x":1437541293,"color":"#1f77b4"},
          {"y":1,"x":1437627694,"color":"#1f77b4"},{"y":1,"x":1437714094,"color":"#1f77b4"},
          {"y":1,"x":1437800619,"color":"#1f77b4"},{"y":1,"x":1437878619,"color":"#1f77b4"},
          {"y":1,"x":1438059534,"color":"#1f77b4"}],"name":"demo","unit":"instance","color":"#1f77b4"}]

The map function transforms the value of x, where x represents Epoch time. This data will later be used to draw graphs. I am seeking to implement the same functionality in AngularJS - any assistance with this would be greatly appreciated.

AngularJS code where I aim to apply the logic similar to jQuery

app.controller('ceilometerCtrl', function($scope, $http) {
  $http.get("http://192.168.206.133:8080/admin/metering)
  .success(function(response) {

      if(response.series.length <=0){
          alert('No Data is available');
      }
      else{

           $scope.metrics=response.series[0].data;
          /* Here same logic as jquery $map */
      }

  });
});

Answer №1

There isn't anything particularly related to AngularJS mentioned in this section. You can easily utilize JavaScript's map function as shown below:

self.series = self.series.map(function(s){
 return s.color = 'any value you wish to set here';
});

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

Clicking on a link initiates the dropdown menu for selecting an option

This project is specifically designed for mobile use, so there's no need to worry about how it will appear on desktop screens. In this project, I have an "a href" with an icon next to it that simulates a button. When a user clicks on it, a dropdown me ...

Getting a boolean response from an asynchronous SQLite query in Express

I am currently developing a middleware that verifies the validity of a session (meaning it has a logged-in user attached). For this purpose, I am utilizing sqlite3 for node.js. Since I am not very familiar with JavaScript, I am facing some challenges figu ...

Modify parameters variable when searching by utilizing bootgrid along with structured-filter

I have implemented both https://github.com/evoluteur/structured-filter and to develop an advanced search functionality using ajax/php. Initially, the code is functioning correctly and retrieves data from the php file. However, I am facing difficulties wh ...

Is it possible to ensure that an asynchronous function runs before the main functional component in React js?

My challenge involves extracting data from an API by manipulating a URL. Specifically, I must retrieve a specific piece of information upon page load and then incorporate it into my URL before fetching the data. var genre_id; var genre; const MOVIE_URL = ` ...

What steps should I take to activate JavaScript type checking in Vue files within Visual Studio Code?

After much exploration, I have successfully configured Visual Studio Code to perform type checking for JavaScript within JS files. This feature highlights any bad code and provides explanations for why it is considered as such here. However, this function ...

Addressing the issue of empty ngRepeat loops

Utilizing ngRepeat to generate table rows: <tr ng-repeat="User in ReportModel.report" on-finish-render> <td><span>{{User.name}}</span></td> </tr> An on-finish-render directive triggers an event upon completion of t ...

Utilizing d3.js to filter a dataset based on dropdown selection

I am working with a data set that contains country names as key attributes. When I select a country from a dropdown menu, I want to subset the dataset to display only values related to the selected country. However, my current code is only outputting [obje ...

Using THREE.js to incorporate a stroke above extruded text

Looking to enhance text with a horizontal line above it: var geo = new THREE.TextGeometry("x", geometry_options); var mat = new THREE.MeshBasicMaterial({color: 0, side:THREE.DoubleSide}); geo.computeBoundingBox (); var vec = new THREE.Shape(); vec.moveTo( ...

Angular - Strategies for Handling Observables within a Component

I am new to Angular and recently started learning how to manage state centrally using ngRx. However, I am facing a challenge as I have never used an Observable before. In my code, I have a cart that holds an array of objects. My goal is to iterate over the ...

Having trouble with running 'npm init -y' in Windows? Here's a workaround for the VS

An error occurred when trying to initialize npm with the command "npm init -y". The name "WEB DEV" was deemed invalid. For a detailed log of this issue, please refer to: C:\Users\User\AppData\Roaming\npm-cache_logs\2020-12-05 ...

Storing Rails model data in JSON format

Although it seems like a question that may have been asked before, I couldn't find exactly what I needed. So, I'll just ask it myself. I'm currently working on implementing an instant search function on my website using angular.js. The goal ...

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

Error Message: TypeError - Unable to access property 'method' as it is not defined

I've just started working on a new node project and I've encountered an issue that I can't seem to figure out. :\Users\RTECH\Desktop\work\aumentedreality\modelViewerwithExpress\node_modules\express&b ...

Creating a progress bar with a mouse listener in React Material Design

I encountered an issue while working with React and React Material-UI components. Here is what I'm trying to achieve: 1) When the user clicks a button in my component, I want to add a mousemove listener to the page and display a ProgressBar. 2) As ...

Having trouble retrieving data from the json file

Using Ajax to obtain a JSON update: $(document).ready(function(){ $('form').submit(function(event){ event.preventDefault(); var form = JSON.stringify($('form').serializeArray()); $.ajax ({ u ...

What is the method for achieving two-way binding between two textboxes in AngularJs?

Being new to AngularJs, I am eager to explore all the features it has to offer. After reading about two-way binding, I decided to test it out on 2 textboxes. I wanted to see if I could enter text into the first textbox and have it immediately appear in th ...

Showcase multiple examples of three.js on a single webpage

I need to showcase several 3D objects on my web app within different containers. Currently, I'm creating multiple three.js renderers, each for a separate container. However, I encountered an error message: "WARNING: Too many active WebGL contexts. Old ...

Error message: `$injector:modulerr - Angular JS` - Indicates an

Currently, I am trying to delve into the world of Angular JS by taking the codeschool course "Shaping up with angular js". The instructor in the videos emphasizes the importance of wrapping code in function(){}. However, upon attempting to do so, an error ...

Troubleshooting the Issue of Angular Model Not Refreshing in Angular.js

Running into an issue with my directive where the model isn't updating as expected. Here's a snippet of my HTML code: <div class="text-area-container"> <textarea ng-model="chatText" ng-keyup="updateCount(chatText)">< ...

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...