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, Jun 17 '14 at 03:41
angular uses jquery lite - ultimately you might want an angular directive to handle when the button is clicked — ewizard, Jun 17 '14 at 03: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, Jun 17 '14 at 03:46
read up here - what u need might be in it https://docs.angularjs.org/api/ng/service/$location — ewizard, Jun 17 '14 at 03:47
@ewizard, it is just a param name, how can I do that with $location.path — vintot, Jun 17 '14 at 04:51
@Joakim - I don't want to use JQuery, I don't want it to mix up with angular. — vintot, Jun 17 '14 at 04:56
Please have a look at this [ST question](http://stackoverflow.com/questions/11442632/how-can-i-make-angular-js-post-data-as-form-data-instead-of-a-request-payload) and answers — przno, Jun 17 '14 at 06:47
@przno yes this will work in sending params, but what I need is to open a tab because I am returning a jasperReport. — vintot, Jun 17 '14 at 07:19
ah ok - so - `window.location.open` is supposed to open a new tab? — ewizard, Jun 17 '14 at 12:37
what is your routing like? I've used angular a bunch - not how u are trying to use it yet :) - but all the experience I have had with url params/angular, usually you have to set up a route (either in node/express...if that is what you are using) - and angular also has a routing system. I am still unclear as what your parameter signifies...you have said you want to open a new tab - how does your database data factor into your problem? Are you using a database? — ewizard, Jun 17 '14 at 12:43
@vintot jquery and angular js works perfectly fine with eachother, one does not go in the way of the other. I do however understand the feeling of not wanting to use both but it is still possible with no hassle at all. — Joakim, Jun 17 '14 at 15:21

score 36 · Answer 1 · answered Jul 13 '15 at 15:51

36

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

answered Jul 13 '15 at 15:51

Rafal Zajac

1,613
1
16
13

7

note that `$httpParamSerializer` and `$httpParamSerializerJQLike` are available since Angular 1.4 – akn Jul 16 '15 at 10:38
1

this should be the real answer – sTx Nov 03 '16 at 08:31

score 12 · Accepted Answer · answered Jun 17 '14 at 03:47

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 '14 at 03:47

Sudhir Bastakoti

99,167
15
158
162

how to use this function?? – vintot Jun 17 '14 at 06:15
3

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 – Josep Oct 06 '14 at 14:19
3

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.](http://stackoverflow.com/a/23606512/878514) – fracz Jan 26 '15 at 08:28

score 7 · Answer 3 · answered Jun 03 '15 at 22:33

7

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

answered Jun 03 '15 at 22:33

Norman Daniel MQ

143
1
3

2

this is the best answer. writing code that already exists is not a good idea. – Doug Jun 24 '15 at 18:04
10

.param() isn't included in jQLite: https://docs.angularjs.org/api/ng/function/angular.element – Alex Ross Jul 23 '15 at 01:23
3

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 – paul Aug 03 '15 at 09:09
2

Doesn't work. `Uncaught TypeError: angular.element.param is not a function(…)` – chalasr Feb 14 '16 at 11:26
I have edited this answer to avoid the misinformation of jQuery lite containing `.param()`. Thanks for that clarification @AlexRoss! – Zane Jul 30 '16 at 04:56
I downvoted because it's not correct that "AngularJs has jquery lite on its core". Alex Ross makes this clear. Cabloo tried to edit the answer to correct the misinformation. – Nate Anderson Sep 09 '16 at 14:54

score 2 · Answer 4 · answered Dec 10 '14 at 11:02

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;
};

score 0 · Answer 5 · answered Apr 24 '15 at 20:36

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

score 0 · Answer 6 · answered Apr 07 '17 at 15:36

0

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

answered Apr 07 '17 at 15:36

enokby

1
1

Convert $.param in angularjs

6 Answers6

Linked

Related