Send javascript Object through $.ajax - javascript

I want to send a javascript object like this one through a $.ajax request :
var o = {
a: 1,
b: 'dummy string',
c: ['a', 1, {}],
d: {dd: 1},
e: new Date(),
f: function() {
console.log('here');
}
}
I know that i normally should use JSON.stringify before sending it to my php script. The problem is JSON.stringify, removes the properties it can't stringify :
JSON.stringify(o);
returns this ->
"{
"a":1,
"b":"dummy string",
"c":["a",1,{}],
"d":{"dd":1},
"e":"2015-11-13T21:34:36.667Z"
}"
But what shoud i do, if i want to store in a mysql column the "o" javascript object as plain text like this :
o = {
a: 1,
b: 'dummy string',
c: ['a', 1, {}],
d: {dd: 1},
e: new Date(),
f: function() {
console.log('here');
}
}

You could try this:
var o = {
a: 1,
b: 'dummy string',
c: ['a', 1, {}],
d: {dd: 1},
e: new Date(),
f: function() {
console.log('here');
}
};
o.f = o.f.toString();
var stringy = JSON.stringify(o);
document.getElementById('test2').innerHTML = stringy;
Fiddle: http://jsfiddle.net/e2cxandt/
Obviously this needs to be changed a bit so you aren't overwriting the function by maybe cloning the object but as a quick example you can see it now has the property in the string.
As someone mentioned in the comments above, war10ck, here is an example of using the replacer argument of JSON.stringify
var o = {
a: 1,
b: 'dummy string',
c: ['a', 1, {}],
d: {dd: 1},
e: new Date(),
f: function() {
console.log('here');
}
};
function replacer (key, value) {
if (typeof value === "function") {
return value.toString();
}
return value;
}
var stringy2 = JSON.stringify(o, replacer);
document.getElementById('test2').innerHTML = stringy2;
Fiddle: http://jsfiddle.net/e2cxandt/1/

a couple universal (non-specific-instance) options:
you can define a custon toJSON on any object:
Function.prototype.toJSON=function(){return String(this);};
JSON.stringify({a:1, b:function(){alert(123)}});
which shows:
{"a":1,"b":"function (){alert(123)}"}
the one caveat is that your function literal is quoted as a string and no longer a function. to fix that if needed, you can use a reviver parameter to JSON.parse().
a better option:
using a replace arg to JSON.stringify():
JSON.stringify({a:1, b:function(){alert(123)}}, function(k,v){
if(typeof v==="function") return String(v);
return v;
});
which shows:
{"a":1,"b":"function (){alert(123)}"}
that way is particularly nice because you need not modify an built-in or instance objects.

Related

How to remove empty objects from object by comparing with another object

I want to remove all empty objects from another object by comparing it with another. Example of this would be:
We have default object like:
defaultObj = {
a: {},
b: {},
c: {
d: {}
}
};
And target object like this:
targetObj = {
a: { x: {} },
b: {},
c: {
d: {},
e: {}
},
f: {}
};
Now, I need to perform operation on targetObj by comparing it with defaultObj, and remove all objects that remain empty, but leave every object in targetObj that weren't originally in default.
Result of operation should look like this:
result = {
a: { x: {} },
c: {
e: {}
},
f: {}
}
Here is a solution that you can use which recursively iterates an object and removes the empty properties as defined in your use case. Make sure to create a deep copy of the object first (as shown in the example) so that the original does not get manipulated:
const defaultObj = {
a: {},
b: {},
c: {
d: {}
}
};
const targetObj = {
a: { x: {} },
b: {},
c: {
d: {},
e: {}
},
f: {}
};
// traverse the object
function removeEmptyObjectProperties(targetObject, defaultObject) {
Object.keys(targetObject).forEach((key) => {
if (defaultObject.hasOwnProperty(key)) {
// checks if it is a json object and has no keys (is empty)
if (targetObject.constructor === ({}).constructor && Object.keys(targetObject[key]).length === 0) {
delete targetObject[key];
} else {
// iterate deeper
removeEmptyObjectProperties(targetObject[key], defaultObject[key]);
}
}
})
}
// deep copy to remove the reference
const targetObjDeepCopy = JSON.parse(JSON.stringify(targetObj));
// execute
removeEmptyObjectProperties(targetObjDeepCopy, defaultObj);
// result
console.log(targetObjDeepCopy)

fill() method for object type

Javascript has Array.prototype.fill() method for Arrays, but what about objects? if we have something like this:
let obj ={
a: true,
b: 'Hi Dude',
c: 12
}
is there any built-in method to fill all properties with one value and make it like this:
let obj ={
a: 'goodbye Dude',
b: 'goodbye Dude',
c: 'goodbye Dude'
}
I know forEach() or for...in solutions can do that, but I hope it can be done with a better approach.
There isn't one for objects because the properties of objects are not uniform (not like indexes of an array which we know goes from 0 to length - 1).
But you can implement what you need using Object.keys and Array#forEach:
Object.keys(theObject).forEach(function(key) {
theObject[key] = theValue;
});
which is even shorter using an arrow function:
Object.keys(theObject).forEach(key => theObject[key] = theValue);
If by any chance the object is from JSON, the values can also be changed with JSON.parse:
j = '{ "a": true, "b": "Hi Dude", "c": 12 }'
o = JSON.parse(j, (k, v) => k === '' ? v : 'goodbye Dude')
console.log( o )
If you want to avoid mutating your original object, you can do it like this:
const fill = val => obj => Object.keys(obj).reduce((o, k) => ({...o, [k]: val}), {})
const obj = {a: true, b: 'Hi Dude', c: 12}
fill('goodbye Dude')(obj) //=> {a: 'goodbye Dude', b: 'goodbye Dude', c: 'goodbye Dude'}
obj //=> {a: true, b: 'Hi Dude', c: 12}
Of course you can change the signature to (val, obj) => ... and call it like fill('goodbye Dude', obj), but it might be useful to have it curried.

jQuery map selected object

I am working with JavaScript, could you help me please
Here is my problem.
I have this object:
var MyObj= [{ a: 0, b: "Zero", c: "x", d: "!" }, { a: 1, b: "One", c: "y", d: "#" }]
I want to change the element of selected object ("a" --> "id") to become like this:
var NewObj= [{ id: 0, b: "Zero", c: "x", d: "!" }, { id: 1, b: "One", c: "y", d: "#" }]
I tried to use $.map() method like this
NewObj= $.map(MyObj, function (obj) {
return { id: obj.a, b: obj.b, c: obj.c, d:obj.d };
});
Is there any better way to do this since I only change one element of object?
No need for ES6 / Object.assign, no need for jQuery:
Working Fiddle: https://jsbin.com/gosaqid/edit?js,console
function makeObj(obj){
return obj.map(function(el, i) {
el.id = i;
delete el.a;
return el;
});
}
Not unless you have a clone/copy/extend function available. One is coming up in new JavaScript, and jQuery has one, and it's not very hard writing your own. But it still isn't a walk in the park - you can't just rename a property, you need to copy and delete:
NewObj = MyObj.map(function(obj) {
var newobj = Object.assign({}, obj, {id: obj.a});
delete newobj.a;
return newobj;
});
In your example MyObj is an array of objects.
var object = {}
var array = []
var arrayOfObjects = [{}, {}, {}]
In your desired result, you have changed one of the keys of every object in the array.
Using map is a perfectly adequate way of doing this, in fact JavaScript's array has a built in map method.
var newArrayOfObjects = arrayOfObjects.map(function (obj) {
return {
id: obj.a,
b: obj.b,
c: obj.c
}
})
If you have a ton of keys this can get a little verbose so you can use $.extend, but chances are you're writing code for modern browsers so the whole thing can be written as such:
var newArrayOfObjects = arrayOfObjects.map(obj =>
Object.assign({}, obj, { id: obj.a })
)
update: as #Amadan suggests, you can also delete the old key if you need

Lodash forEach function omit

I have an object in my .js file (node)
var z = [
{'a': 'uno', 'b': 'dos'},
{'a': 'uno', 'b': 'dos'},
{'a': 'uno', 'b': 'dos'},
{'a': 'uno', 'b': 'dos'}
];
I would like to omit each 'a' from z object.
I'm trying with something like this, but is not working.
var y = _.forEach(z, function(n){
//console.log(_.omit(n, 'a'));
return _.omit(n, 'a');
});
console.log(y);
I tried without return, and few ways more, but didn't get it.
My jsfiddle link: http://jsfiddle.net/baumannzone/jzs6n78m/
Any help? Cheers!
Create a new array of objects, by omitting a from each of them
console.log(_.map(z, function (obj) {
return _.omit(obj, 'a');
}));
// [ { b: 'dos' }, { b: 'dos' }, { b: 'dos' }, { b: 'dos' } ]
As it is, you are omitting and creating a new object but that object is ignored by _.each. Now, we use _.map, which will gather all the values returned from the function and form a new array.
If you prefer a one-liner, create a partial function and leave only the object to be used as _, like this
console.log(_.map(z, _.partial(_.omit, _, 'a')));
// [ { b: 'dos' }, { b: 'dos' }, { b: 'dos' }, { b: 'dos' } ]
var y = _.map(z, function(n) {
return _.omit(n, 'a');
});
This will create a new array from the old one, mapping the objects in z to new objects that omit the 'a' attribute.
An alternative is to use chaining, so:
var y = _(z).map(function(n){return n.omit('a');}).value();
B

How to remove undefined and null values from an object using lodash?

I have a Javascript object like:
var my_object = { a:undefined, b:2, c:4, d:undefined };
How to remove all the undefined properties? False attributes should stay.
You can simply chain _.omit() with _.isUndefined and _.isNull compositions, and get the result with lazy evaluation.
Demo
var result = _(my_object).omit(_.isUndefined).omit(_.isNull).value();
Update March 14, 2016:
As mentioned by dylants in the comment section, you should use the _.omitBy() function since it uses a predicate instead of a property. You should use this for lodash version 4.0.0 and above.
DEMO
var result = _(my_object).omitBy(_.isUndefined).omitBy(_.isNull).value();
Update June 1, 2016:
As commented by Max Truxa, lodash already provided an alternative _.isNil, which checks for both null and undefined:
var result = _.omitBy(my_object, _.isNil);
If you want to remove all falsey values then the most compact way is:
For Lodash 4.x and later:
_.pickBy({ a: null, b: 1, c: undefined }, _.identity);
>> Object {b: 1}
For legacy Lodash 3.x:
_.pick(obj, _.identity);
_.pick({ a: null, b: 1, c: undefined }, _.identity);
>> Object {b: 1}
The correct answer is:
_.omitBy({ a: null, b: 1, c: undefined, d: false }, _.isNil)
That results in:
{b: 1, d: false}
The alternative given here by other people:
_.pickBy({ a: null, b: 1, c: undefined, d: false }, _.identity);
Will remove also false values which is not desired here.
if you are using lodash, you can use _.compact(array) to remove all falsely values from an array.
_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]
https://lodash.com/docs/4.17.4#compact
Just:
_.omit(my_object, _.isUndefined)
The above doesn't take in account null values, as they are missing from the original example and mentioned only in the subject, but I leave it as it is elegant and might have its uses.
Here is the complete example, less concise, but more complete.
var obj = { a: undefined, b: 2, c: 4, d: undefined, e: null, f: false, g: '', h: 0 };
console.log(_.omit(obj, function(v) { return _.isUndefined(v) || _.isNull(v); }));
To complete the other answers, in lodash 4 to ignore only undefined and null (And not properties like false) you can use a predicate in _.pickBy:
_.pickBy(obj, v !== null && v !== undefined)
Example below :
const obj = { a: undefined, b: 123, c: true, d: false, e: null};
const filteredObject = _.pickBy(obj, v => v !== null && v !== undefined);
console.log = (obj) => document.write(JSON.stringify(filteredObject, null, 2));
console.log(filteredObject);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
According to lodash docs:
_.compact(_.map(array, fn))
Also you can filter out all nulls
For deep nested object you can use my snippet for lodash > 4
const removeObjectsWithNull = (obj) => {
return _(obj)
.pickBy(_.isObject) // get only objects
.mapValues(removeObjectsWithNull) // call only for values as objects
.assign(_.omitBy(obj, _.isObject)) // save back result that is not object
.omitBy(_.isNil) // remove null and undefined from object
.value(); // get value
};
with pure JavaScript: (although Object.entries is ES7, Object.assign is ES6; but equivalent ES5 uses Object.keys only should be also doable); also notice v != null checks for both null and undefined;
> var d = { a:undefined, b:2, c:0, d:undefined, e: null, f: 0.3, s: "", t: false };
undefined
> Object.entries(d)
.filter(([ k, v ]) => (v != null))
.reduce((acc, [k, v]) => Object.assign(acc, {[k]: v}), {})
{ b: 2, c: 0, f: 0.3, s: '', t: false }
Edit: this below is the version with ES5 Object.keys only: but generally with ES7 in Node v8 is pretty much enjoyable ;-)
> Object.keys(d)
.filter(function(k) { return d[k] != null; })
.reduce(function(acc, k) { acc[k] = d[k]; return acc; }, {});
{ b: 2, c: 0, f: 0.3, s: '', t: false }
Update in October 2017: with Node v8 (since v8.3 or so) now it has object spreading construct:
> var d = { a:undefined, b:2, c:0, d:undefined,
e: null, f: -0.0, s: "", t: false, inf: +Infinity, nan: NaN };
undefined
> Object.entries(d)
.filter(([ k, v ]) => (v != null))
.reduce((acc, [k, v]) => ({...acc, [k]: v}), {})
{ b: 2, c: 0, f: -0, s: '', t: false, inf: Infinity, nan: NaN }
or within one reduce only:
> Object.entries(d)
.reduce((acc, [k, v]) => (v==null ? acc : {...acc, [k]: v}), {})
{ b: 2, c: 0, f: -0, s: '', t: false, inf: Infinity, nan: NaN }
Update: someone want recursive? isn't that hard either, just need an additional check of isObject, and recursively call itself:
> function isObject(o) {
return Object.prototype.toString.call(o) === "[object Object]"; }
undefined
> function dropNullUndefined(d) {
return Object.entries(d)
.reduce((acc, [k, v]) => (
v == null ? acc :
{...acc, [k]: (isObject(v) ? dropNullUndefined(v) : v) }
), {});
}
> dropNullUndefined({a: 3, b:null})
{ a: 3 }
> dropNullUndefined({a: 3, b:null, c: { d: 0, e: undefined }})
{ a: 3, c: { d: 0 } }
my conclusion: if pure Javascript can do, I would avoid any third party library dependencies:
To remove undefined, null, and empty string from object
_.omitBy(object, (v) => _.isUndefined(v) || _.isNull(v) || v === '');
I encountered a similar problem with removing undefined from an object (deeply), and found that if you are OK to convert your plain old object and use JSON, a quick and dirty helper function would look like this:
function stripUndefined(obj) {
return JSON.parse(JSON.stringify(obj));
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description
"...If undefined, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to null (when it is found in an array)."
Since some of you might have arrived at the question looking to specifically removing only undefined, you can use:
a combination of Lodash methods
_.omitBy(object, _.isUndefined)
the rundef package, which removes only undefined properties
rundef(object)
If you need to recursively remove undefined properties, the rundef package also has a recursive option.
rundef(object, false, true);
See the documentation for more details.
Here's the lodash approach I'd take:
_(my_object)
.pairs()
.reject(function(item) {
return _.isUndefined(item[1]) ||
_.isNull(item[1]);
})
.zipObject()
.value()
The pairs() function turns the input object into an array of key/value arrays. You do this so that it's easier to use reject() to eliminate undefined and null values. After, you're left with pairs that weren't rejected, and these are input for zipObject(), which reconstructs your object for you.
Taking in account that undefined == null we can write as follows:
let collection = {
a: undefined,
b: 2,
c: 4,
d: null,
}
console.log(_.omit(collection, it => it == null))
// -> { b: 2, c: 4 }
JSBin example
I like using _.pickBy, because you have full control over what you are removing:
var person = {"name":"bill","age":21,"sex":undefined,"height":null};
var cleanPerson = _.pickBy(person, function(value, key) {
return !(value === undefined || value === null);
});
Source: https://www.codegrepper.com/?search_term=lodash+remove+undefined+values+from+object
You can also use Object.entries with Array.prototype.filter.
const omitNullish = (object) =>
Object.fromEntries(
Object.entries(object).filter(([, value]) => value != null)
)
omitNullish({ a: null, b: 1, c: undefined, d: false, e: 0 }) // { b: 1, d: false, e: 0}
If you want to use lodash, they are removing omit from v5 so an alternative is to use fp/pickBy along with isNil and negate.
import pickBy from 'lodash/fp/pickBy'
import isNil from 'lodash/isNil';
import negate from 'lodash/negate';
const omitNullish = pickBy(negate(isNil))
omitNullish({ a: null, b: 1, c: undefined, d: false, e: 0 }) // { b: 1, d: false, e: 0}
pickBy uses identity by default:
_.pickBy({ a: null, b: 1, c: undefined, d: false });
With lodash (or underscore) You may do
var my_object = { a:undefined, b:2, c:4, d:undefined, e:null };
var passedKeys = _.reject(Object.keys(my_object), function(key){ return _.isUndefined(my_object[key]) || _.isNull(my_object[key]) })
newObject = {};
_.each(passedKeys, function(key){
newObject[key] = my_object[key];
});
Otherwise, with vanilla JavaScript, you can do
var my_object = { a:undefined, b:2, c:4, d:undefined };
var new_object = {};
Object.keys(my_object).forEach(function(key){
if (typeof my_object[key] != 'undefined' && my_object[key]!=null){
new_object[key] = my_object[key];
}
});
Not to use a falsey test, because not only "undefined" or "null" will be rejected, also is other falsey value like "false", "0", empty string, {}. Thus, just to make it simple and understandable, I opted to use explicit comparison as coded above.
To omit all falsey values but keep the boolean primitives this solution helps.
_.omitBy(fields, v => (_.isBoolean(v)||_.isFinite(v)) ? false : _.isEmpty(v));
let fields = {
str: 'CAD',
numberStr: '123',
number : 123,
boolStrT: 'true',
boolStrF: 'false',
boolFalse : false,
boolTrue : true,
undef: undefined,
nul: null,
emptyStr: '',
array: [1,2,3],
emptyArr: []
};
let nobj = _.omitBy(fields, v => (_.isBoolean(v)||_.isFinite(v)) ? false : _.isEmpty(v));
console.log(nobj);
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js"></script>
Shortest way (lodash v4):
_.pickBy(my_object)
If you don't want to remove false values. Here is an example:
obj = {
"a": null,
"c": undefined,
"d": "a",
"e": false,
"f": true
}
_.pickBy(obj, x => x === false || x)
> {
"d": "a",
"e": false,
"f": true
}
You can use lodash to remove null and undefined objects , but you should konw what lodash method you need to use, many dev uses isNil to remove the Null and undefined objects , but this function not remove the empty objects (' ')
you can use isEmpty to remove Null , Undefined and
import pickBy from 'lodash/fp/pickBy'
import negate from 'lodash/negate';
import isEmpty from 'lodash/isEmpty';
const omitNullish = pickBy(negate(isEmpty));
addressObject = {
"a": null,
"c": undefined,
"d": "",
"e": "test1",
"f": "test2
}
const notNullObjects = omitNullish(addressObject);
console.log(notNullObjects);
you will have this object : {
"e": "test1",
"f": "test2
}
var my_object = { a:undefined, b:2, c:4, d:undefined };
var newObject = _.reject(my_collection, function(val){ return _.isUndefined(val) })
//--> newCollection = { b: 2, c: 4 }
I would use underscore and take care of empty strings too:
var my_object = { a:undefined, b:2, c:4, d:undefined, k: null, p: false, s: '', z: 0 };
var result =_.omit(my_object, function(value) {
return _.isUndefined(value) || _.isNull(value) || value === '';
});
console.log(result); //Object {b: 2, c: 4, p: false, z: 0}
jsbin.
For deep nested object and arrays. and exclude empty values from string and NaN
function isBlank(value) {
return _.isEmpty(value) && !_.isNumber(value) || _.isNaN(value);
}
var removeObjectsWithNull = (obj) => {
return _(obj).pickBy(_.isObject)
.mapValues(removeObjectsWithNull)
.assign(_.omitBy(obj, _.isObject))
.assign(_.omitBy(obj, _.isArray))
.omitBy(_.isNil).omitBy(isBlank)
.value();
}
var obj = {
teste: undefined,
nullV: null,
x: 10,
name: 'Maria Sophia Moura',
a: null,
b: '',
c: {
a: [{
n: 'Gleidson',
i: 248
}, {
t: 'Marta'
}],
g: 'Teste',
eager: {
p: 'Palavra'
}
}
}
removeObjectsWithNull(obj)
result:
{
"c": {
"a": [
{
"n": "Gleidson",
"i": 248
},
{
"t": "Marta"
}
],
"g": "Teste",
"eager": {
"p": "Palavra"
}
},
"x": 10,
"name": "Maria Sophia Moura"
}
For those of you getting here looking to remove from an array of objects and using lodash you can do something like this:
const objects = [{ a: 'string', b: false, c: 'string', d: undefined }]
const result = objects.map(({ a, b, c, d }) => _.pickBy({ a,b,c,d }, _.identity))
// [{ a: 'string', c: 'string' }]
Note: You don't have to destruct if you don't want to.
I was able to do this in deep objects that include arrays with just one lodash function, transform.
Note that the double-unequal (!= null) is intentional as it will also match undefined, as is the typeof 'object' check as it will match both object and array.
This is for use with plain data objects only that don't contain classes.
const cloneDeepSanitized = (obj) =>
Array.isArray(obj)
? obj.filter((entry) => entry != null).map(cloneDeepSanitized)
: transform(
obj,
(result, val, key) => {
if (val != null) {
result[key] =
typeof val === 'object' ? cloneDeepSanitized(val) : val;
}
},
{},
);

Categories

Resources