How to prevent of sending empty fields in Angular HttpClient.post method?

Question

when I want to send information as post Method to my Rest API, Angular sends empty fields and subsequently, my database saves the empty value.

But I want to prevent it and I don't want to send empty fields from my Angular to my Backends.

For example, in below example, Angular sends an "" in entityTypeName field and unfortunately, the Postgres DB will save empty instead of null.

{ 
   createdAt: "2019-01-11T13:59:52.311678"
   entityTypeName: ""
   id: "1bd46fce-fc6f-410f-acaf-74d5964cf92b"
   updatedAt: "2019-01-11T13:59:52.311678"
   updatedBy: "admin@admin.com"
   version: 0 
}

I'm looking for a general solution that prevent sending empity values in Angular side in all situations.

There isn't a general solution. You either make sure that client is sending valid requests, validate them on the backend before acting on them, or (ideally) both. You need a rule somewhere that says that `""` is not a valid value for `entityTypeName`. — jonrsharpe, Jan 11 '19 at 13:40

score 5 · Answer 1 · 2019-01-11T14:14:49.577

5

Here is a function doing it. Simply provide your object to the function, and it will delete the empty keys.

function removeEmptyStringsFrom(obj) {
  const clone = { ...obj };
  Object.entries(clone).forEach(([key, val]) => val === '' && delete clone[key]);
  return clone;
}

const test = {
  notEmpty: 'toto',
  empty: '',
};

console.log(removeEmptyStringsFrom(test));

EDIT : Challenge accepted !

const removeEmptyStringsFrom = (obj) => Object
  .entries({ ...obj })
  .filter(([key, val]) => val !== '')
  .reduce((prev, curr) => ({ ...prev, [curr[0]]: curr[1] }), {});

const test = {
  notEmpty: 'toto',
  empty: '',
};
    
console.log(removeEmptyStringsFrom(test));

edited Jan 11 '19 at 14:14

answered Jan 11 '19 at 13:51

This will drop **falsey** properties from an object. – Reactgular Jan 11 '19 at 13:54
@cgTag well that's kind of what I said ... – Jan 11 '19 at 13:55
1

Just change `!val` to `val !== ""` and you've got what the OP wants :) – Reactgular Jan 11 '19 at 13:55
I'll give you an upvote if you can rewrite `removeEmptyFieldsFrom()` as one line of code. I've been unable to figure that out in JS. I wish we had `Object.zip()` – Reactgular Jan 11 '19 at 13:58
I'm waiting for my upvote then :) – Jan 11 '19 at 14:02
@cgTag (although it's not technically on one line, I find it cleaner like that, for readability's sake) – Jan 11 '19 at 14:08
A reducer! Oh very impressive. I am humbled by the better JS coder :) – Reactgular Jan 11 '19 at 14:31
`{ ...prev, [curr[0]]: curr[1] }` blows my mind. I did not know you could use an accessor with deconstruction. thank you. – Reactgular Jan 11 '19 at 14:32
Why thank you, and I'm glad I could make you learn something new :) – Jan 11 '19 at 15:01

score 0 · Answer 2 · answered Jan 11 '19 at 13:53

Since you do not provide any kind of example i am going to base my answer on the assumptions that you pass an instance of an object (lets name it entity) in the body and you let the HttpClient handle the serialisation to json.

If you want to get rid of properties with the empty string you could delete the property

delete entity.entityTypeName

For a generic solution that would remove all empty string properties, you could use an HttpInterceptor that would

check if the outgoing httpRequest holds a json body
iterate through all the properties (or specific properties)
delete those that are declared as empty strings

How to prevent of sending empty fields in Angular HttpClient.post method?

2 Answers2