Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular equivalent of jQuery $.map?

I'm transitioning from relying on jQuery to building apps in AngularJS. It's recommended in a number of places to not mix jQuery and Angular code.

One thing I miss though is the jQuery $.map function for arrays. I know this could be re-written using the native Javascript map function, but this is not implemented in all browsers (notably, IE < v9).

So, is there an Angular equivalent, or should I got back to writing for (var x = 0; x < foo; x += 1) {...} so I can stop including jQuery?

UPDATE Sometimes knowing what to search for is all you need. Bergie says 'look for polyfills'. Here's a reference guide (from the Modernizr crew) for a bunch of resources for making modern code work on older browsers: HTML5 Cross Browser Polyfills

like image 413
Ben Jacobs Avatar asked Mar 14 '13 14:03

Ben Jacobs


People also ask

Can we use map in Angular?

The Angular observable Map operator takes an observable source as input. It applies a project function to each of the values emitted by the source observable and transforms it into a new value. It then emits the new value to the subscribers.

Is it good to use jQuery in Angular?

jQuery is a small yet feature-rich powerful javascript library that helps to manipulate the HTML DOM with less javascript code. We can use jQuery with Angular. There are some situations you come across while building Angular apps that it's absolutely necessary to use a library like jQuery to get something done.

What is jQuery in Angular?

jQuery is a Javascript-based library that is primarily used for DOM manipulation whereas Angular is a front-end development framework that is used for creating single-page applications.

What is map in Angular with example?

In your first statement, Map is JavaScript array function which iterates through each item of the array in order to map array of object to another array of object. let array = [1,2,3,4,5] ; let result = array. map(val => val +10); //11,12,13,14,15. In your second statement, map is coming from rxjs library.


1 Answers

Check here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map

Mozilla has supplied an Array.map polyfill for unsupported browsers

if (!Array.prototype.map) {   Array.prototype.map = function(callback, thisArg) {      var T, A, k;      if (this == null) {       throw new TypeError(" this is null or not defined");     }      // 1. Let O be the result of calling ToObject passing the |this| value as the argument.     var O = Object(this);      // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".     // 3. Let len be ToUint32(lenValue).     var len = O.length >>> 0;      // 4. If IsCallable(callback) is false, throw a TypeError exception.     // See: http://es5.github.com/#x9.11     if (typeof callback !== "function") {       throw new TypeError(callback + " is not a function");     }      // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.     if (thisArg) {       T = thisArg;     }      // 6. Let A be a new array created as if by the expression new Array(len) where Array is     // the standard built-in constructor with that name and len is the value of len.     A = new Array(len);      // 7. Let k be 0     k = 0;      // 8. Repeat, while k < len     while(k < len) {        var kValue, mappedValue;        // a. Let Pk be ToString(k).       //   This is implicit for LHS operands of the in operator       // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.       //   This step can be combined with c       // c. If kPresent is true, then       if (k in O) {          // i. Let kValue be the result of calling the Get internal method of O with argument Pk.         kValue = O[ k ];          // ii. Let mappedValue be the result of calling the Call internal method of callback         // with T as the this value and argument list containing kValue, k, and O.         mappedValue = callback.call(T, kValue, k, O);          // iii. Call the DefineOwnProperty internal method of A with arguments         // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},         // and false.          // In browsers that support Object.defineProperty, use the following:         // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });          // For best browser support, use the following:         A[ k ] = mappedValue;       }       // d. Increase k by 1.       k++;     }      // 9. return A     return A;   };       } 
like image 79
Rob M. Avatar answered Oct 13 '22 19:10

Rob M.