Cannot convert object to primitive value in converting object into URL encoded string

Question

I'm trying to convert an object to a URL encoded string using this functions:

console.log(jQuery.param($scope.employee));

console.log($.param($scope.employee));

But they give me an error of:

TypeError: Cannot convert object to primitive value at encodeURIComponent () at e (jquery-3.2.1.min.js:4) at Ab (jquery-3.2.1.min.js:4) at Function.r.param (jquery-3.2.1.min.js:4) at m.$scope.save (employees.js:49) at fn (eval at compile (angular.min.js:241), :4:388) at e (angular.min.js:286) at m.$eval (angular.min.js:149) at m.$apply (angular.min.js:150) at HTMLButtonElement. (angular.min.js:286)

The value of $scope.employee

Data: Object
contact_number:"112"
created_at:"2017-08-08 05:27:03"
email:"[email protected]"
id:9
name:"re"
position:"a"
updated_at:"2017-08-08 05:27:03"

This is developed using Laravel and AngularJS hosted on HomeStead. Jquery is installed.

Update for verification purposes only:

Modal HTML code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="frmEmployees" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputEmail3" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
    <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{employee.data.name}}" 
    ng-model="employee.data.name" ng-required="true">
    <span class="help-inline" 
    ng-show="frmEmployees.name.$invalid && frmEmployees.name.$touched">Name field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
    <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{employee.data.email}}" 
    ng-model="employee.data.email" ng-required="true">
    <span class="help-inline" 
    ng-show="frmEmployees.email.$invalid && frmEmployees.email.$touched">Valid Email field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Contact Number</label>
<div class="col-sm-9">
    <input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{employee.data.contact_number}}" 
    ng-model="employee.data.contact_number" ng-required="true">
<span class="help-inline" 
    ng-show="frmEmployees.contact_number.$invalid && frmEmployees.contact_number.$touched">Contact number field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Position</label>
<div class="col-sm-9">
    <input type="text" class="form-control" id="position" name="position" placeholder="Position" value="{{employee.data.position}}" 
    ng-model="employee.data.position" ng-required="true">
<span class="help-inline" 
    ng-show="frmEmployees.position.$invalid && frmEmployees.position.$touched">Position field is required</span>
</div>
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, employee.data.id)" ng-disabled="frmEmployees.$invalid">Save changes</button>
</div>
</div>
</div>
</div>

Note: In the tutorial I was following the value for the ng-model was this: employee.position but I changed it to employee.data.position for the reason that when I will update the record the values are not populated in the field but after adding data the values are now populated.

I am just starting to learn about Laravel and AngularJS.

Gaurav Srivastava · Accepted Answer · 2017-08-08 05:43:39Z

2

If you are using Angular you can use $httpParamSerializerJQLike, sample code:

.controller(function($http, $httpParamSerializerJQLike) {
  //...

  $http({
    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

});

Angular documentation here

answered Aug 8, 2017 at 5:43

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

8 Comments

hungrykoala Over a year ago

There is some problem with the converted value

data%5Bid%5D=13&data%5Bname%5D=aa%20aa&data%5Bemail%5D=aa%40sdd.com&data%5Bcontact_number%5D=123&data%5Bposition%5D=a&data%5Bcreated_at%5D=2017-08

there are data values in between.

hungrykoala Over a year ago

Is there a way to make it look like this: data%5Bcontact_number%5D=123&data%5Bemail%[email protected]&data%5Bname%5D=cc+aa&data%5Bposition%5D=as

Gaurav Srivastava Over a year ago

is it not parsing on server side?

hungrykoala Over a year ago

It works now I just let it as is. Will you be able to enlighten me as to why $.param is not working? I'm following a tutorial. Thank you

Gaurav Srivastava Over a year ago

i would be able to clarify if you provide me more code, because usually $.param works

|

Muhaimin · Accepted Answer · 2017-08-08 05:46:54Z

1

this can be done without jQuery

var serialize = function(obj, prefix) {
  var str = [], p;
  for(p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
      str.push((v !== null && typeof v === "object") ?
        serialize(v, k) :
        encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&");
}

usage console.log(serialize($scope.employee))

edited Aug 8, 2017 at 5:46

answered Aug 8, 2017 at 5:39

Muhaimin

1,6362 gold badges26 silver badges48 bronze badges

4 Comments

hungrykoala Over a year ago

how do i call serialize?

Muhaimin Over a year ago

oops. my mistake.

hungrykoala Over a year ago

There is some problem with the converted value

data%5Bid%5D=13&data%5Bname%5D=aa%20aa&data%5Bemail%5D=aa%40sdd.com&data%5Bcontact_number%5D=123&data%5Bposition%5D=a&data%5Bcreated_at%5D=2017-08

there are data values in between

Muhaimin Over a year ago

your data contain nested object?

Collectives™ on Stack Overflow

Cannot convert object to primitive value in converting object into URL encoded string

2 Answers 2

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related