Convert $.param in angularjs

Question

Before I am using JQuery and I use this to send URL with parameter

window.location = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});

but with angularjS this does not work the same way

$scope.myButton = function() {
    $window.location.open = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});
};//Error: $ is not defined

can anyone help me how to do this in angularJs

add jquery if you want to use jquery functions. otherwise you need to do it the old javascript way. — Joakim
– Joakim, Commented Jun 17, 2014 at 3:41
angular uses jquery lite - ultimately you might want an angular directive to handle when the button is clicked — ewizard
– ewizard, Commented Jun 17, 2014 at 3:44
I think you want something like $location.path('xxurlxx') but i am not sure about the parameter because i am not farmiliar with what you are trying to do with the option — ewizard
– ewizard, Commented Jun 17, 2014 at 3:46

Rafal Zajac · Accepted Answer · 2015-07-13 15:51:16Z

36

There's a built-in serializer in angular which mimics $.param(): $httpParamSerializerJQLike

answered Jul 13, 2015 at 15:51

Rafal Zajac

1,6931 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

akn Over a year ago

note that $httpParamSerializer and $httpParamSerializerJQLike are available since Angular 1.4

sTx Over a year ago

this should be the real answer

Sudhir Bastakoti · Accepted Answer · 2014-06-17 03:47:58Z

12

If you are trying to create serialized representation of data like $.param() does,

function serializeData( data ) { 
    // If this is not an object, defer to native stringification.
    if ( ! angular.isObject( data ) ) { 
        return( ( data == null ) ? "" : data.toString() ); 
    }

    var buffer = [];

    // Serialize each key in the object.
    for ( var name in data ) { 
        if ( ! data.hasOwnProperty( name ) ) { 
            continue; 
        }

        var value = data[ name ];

        buffer.push(
            encodeURIComponent( name ) + "=" + encodeURIComponent( ( value == null ) ? "" : value )
        ); 
    }

    // Serialize the buffer and clean it up for transportation.
    var source = buffer.join( "&" ).replace( /%20/g, "+" ); 
    return( source ); 
}

and use this for your data serialization

answered Jun 17, 2014 at 3:47

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

3 Comments

vintot Over a year ago

how to use this function??

Josep Over a year ago

this function won't work if the data contains nested objects i.e: if you data is something like {foo:[{id:1, val:'test'},{id:2, val:'test2'}], bar:{test:'myTest'}} it won't work

fracz Over a year ago

Do not reinvent the wheel. If jQuery has this implemented, use it. Don't be too scary about mixing these libraries. AngularJS does not replace jQuery.

Norman Daniel MQ · Accepted Answer · 2015-06-03 22:33:27Z

7

AngularJs has jquery lite on its core so you can use angular.element.param() instead of $.param()

answered Jun 3, 2015 at 22:33

Norman Daniel MQ

1431 silver badge3 bronze badges

6 Comments

Doug Over a year ago

this is the best answer. writing code that already exists is not a good idea.

Alex Ross Over a year ago

.param() isn't included in jQLite: docs.angularjs.org/api/ng/function/angular.element

paul Over a year ago

this may work if you include jQuery anyway, as angular will use that, but with pure Angular (jQuery Lite) it throws TypeError: angular.element.param is not a function

chalasr Over a year ago

Doesn't work. Uncaught TypeError: angular.element.param is not a function(…)

Zane Over a year ago

I have edited this answer to avoid the misinformation of jQuery lite containing .param(). Thanks for that clarification @AlexRoss!

|

scx · Accepted Answer · 2014-12-10 11:02:05Z

I found this function useful for url serialization. Will also work for nested objects.

var param = function(obj) {

  if ( ! angular.isObject( obj) ) { 
    return( ( obj== null ) ? "" : obj.toString() ); 
  }
  var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

  for(name in obj) {

    value = obj[name];
    if(value instanceof Array) {
      for(i in value) {

        subValue = value[i];
        fullSubName = name + '[' + i + ']';
        innerObj = {};
        innerObj[fullSubName] = subValue;
        query += param(innerObj) + '&';
      }

    } else if(value instanceof Object) {
      for(subName in value) {

        subValue = value[subName];
        fullSubName = name + '[' + subName + ']';
        innerObj = {};
        innerObj[fullSubName] = subValue;
        query += param(innerObj) + '&';
      }
    }
    else if(value !== undefined && value !== null)
      query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
  }

  return query.length ? query.substr(0, query.length - 1) : query;
};

Titus Okathe · Accepted Answer · 2015-04-24 20:36:02Z

0

You can simply use $.param on the javascript object and pass it to either $resource or $http and it should work fine. One caveat though is ensure it is an object and not an array.

var badParam = {'name':'john',...}; // contains more properties
var goodParam = {name :'john',...}; // contains more properties

answered Apr 24, 2015 at 20:36

Titus Okathe

91 bronze badge

Comments

enokby · Accepted Answer · 2017-04-07 15:36:13Z

0

you can inject and use this function instead: $httpParamSerializerJQLike()

answered Apr 7, 2017 at 15:36

enokby

11 bronze badge

Collectives™ on Stack Overflow

Convert $.param in angularjs

6 Answers 6

2 Comments

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related