How to convert nested object to query string in Angularjs - arrays

Question

I want to convert this object:
$scope.foo = {
bar: {
baz: 'foobarbaz'
}
}
to
foo[bar][baz]=foobarbaz
query string.
Also how to convert
$scope.fields = ['id', 'name', 'created_at']
to
fields[]=id&fields[]=name&fields[]=created_at`
Is there any library or function in Angularjs to do this job?

Answer 1

No need to write those serializers yourself, Angular has the one built-in for you. imply inject $httpParamSerializerJQLike service and use it:
$scope.foo = {
foo: {
bar: {
baz: 'foobarbaz'
}
}
};
$scope.fields = {
fields: ['id', 'name', 'created_at']
};
console.log( $httpParamSerializerJQLike($scope.foo) );
// => "foo[bar][baz]=foobarbaz"
console.log( $httpParamSerializerJQLike($scope.fields) );
// => "fields[]=id&fields[]=name&fields[]=created_at"
// (output shown URL-decoded)

Answer 2

Take a look at this
function toPhpQuery(obj) {
return Object.keys(obj).map(key => {
var val = obj[key];
var prefix = encodeURIComponent(key);
return Array.isArray(val)
? _toPhpQueryArray(val, prefix)
: _toPhpQueryObject(val, prefix);
}).join("&");
function _toPhpQueryArray(arr, prefix) {
return arr.map(v => prefix + "[]=" + encodeURIComponent(v)).join("&");
}
function _toPhpQueryObject(value, prefix) {
if (typeof value === "object" && value) {
return Object.keys(value).map(k => _toPhpQueryObject(value[k], prefix + "[" + encodeURIComponent(k) + "]")).join("&");
} else {
return prefix + "=" + encodeURIComponent(value);
}
}
}
console.log(toPhpQuery({
foo: {
bar: {
baz: 'foobarbaz'
}
},
fields: ['id', 'name', 'created_at']
}));