1

I read here that i can add a key:value to an object only if the value is not null otherwise the key:value will not be there at all :

   var product = {
         coverTitle:document.getElementById("coverTitle").value.length>0 ? getElementById("coverTitle").value : undefined,
..
..

Will print : 

coverTitle:undefined

I expect to not have this key inside at all.

I read it here : In Javascript, how to conditionally add a member to an object?

answer by Frédéric Hamidi

When uploading to a server I do not want to write this pair at all, like they are not there. What am I doing wrong ?

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
phamng
  • 31
  • 1
  • 6

2 Answers2

3

You need to add the property later - undefined key/value pairs are still kept in the object.

let product = {};
const value = document.getElementById("coverTitle").value;
if (value) product.coverTitle = value;

Alternatively, use JSON methods to remove undefined key/value pairs - costly, but it works:

var product = {
     coverTitle: document.getElementById("coverTitle").value.length > 0 ? document.getElementById("coverTitle").value : undefined
};

product = JSON.parse(JSON.stringify(product));
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
  • Thanks, sorry that I ask again - 1. so that answer is just wrong? what am I missing here? 2. I have many fields like that, is it better to just stringify it or you won't do that? – phamng Jun 23 '19 at 04:40
  • You can use that method in the object literal with a ternary operator and then stringify it at the end, that's the best practice. And no, that answer's not wrong - it just uses jQuery's `$.extend` which removes `undefined` fields, and that's not native JavaScript behaviour. – Jack Bashford Jun 23 '19 at 04:41
  • This performs the lookup `document.getElementById("coverTitle")` twice doesn't it? – Avin Kavish Jun 23 '19 at 04:48
  • Yes it does @AvinKavish - but that's the OP's code not mine. I'd do it using an array and spreading, because the double lookup is quite inefficient. – Jack Bashford Jun 23 '19 at 04:49
  • @JackBashford so you would put them all in array and then simply loop over it right? ( just to understand something basic, say its not efficient, that means it takes another few fraction of seconds to do, the user will never feel it anyway, so is it that bad ? or is it just for us the programmers to feel better ? ) – phamng Jun 23 '19 at 04:54
  • Yeah, I'd place all the element in a temporary array, `filter` over it, and then spread the results into an object after `map`ping into key/value pairs. – Jack Bashford Jun 23 '19 at 04:57
  • Why pay the serialize/deserialize cost when a function that just removes undefined properties is 3 lines long? `function clean(o) { for (key in o) { if (o[key] === undefined) { delete o[key]; } } }` - Or use `Object.keys` to be cleaner. – Sebastian Redl Feb 12 '21 at 11:22
1

You can conditionally add the key later on, but you can't write it inside the object literal.

  const product = { }

  const value = document.getElementById("coverTitle").value

  if (value)
    product.coverTitle = value

  // or
  value && (product.coverTitle = value)
Avin Kavish
  • 8,317
  • 1
  • 21
  • 36
  • Is there a more elegant way if you have 20 fields like that ? – phamng Jun 23 '19 at 04:33
  • No it's not, but there was a time on the web when everything was written with a library called jQuery. So it was seen as okay to give answers using that library. – Avin Kavish Jun 23 '19 at 04:33
  • So how would I change this line to be to be jQuery ? (sorry if its a stupid question) – phamng Jun 23 '19 at 04:34
  • You have to check whether [jQuery](https://jquery.com/) is installed or install it, it's about 80kb in size. Or you could use @Jack's hacky but working trick with `JSON.parse`. If you intend to send it to the server you will be `JSON.stringifying` anyway wouldn't you? – Avin Kavish Jun 23 '19 at 04:38