Add property to object when it's not null

Question

I'm working on a small API and I want to update the data using HTTP PATCH REQUEST without using a bunch of if statements. I'm trying to fill the outgoing data object with the changed data only.

update() {
    let prop1 = hasBeenChanged.prop1 ? changedData.prop1 : null;
    // ...
    let propN = hasBeenChanged.propN ? changedData.propN : null;

    let data: ISomething = {
        // something like --> property != null ? property: property.value : nothing
    }
}

Is there any way to create the data object dynamically?

pho_pho · Accepted Answer · 2020-01-09 10:55:42Z

68

You could use Object.assign in combination with the ternary operator:

let data = Object.assign({},
  first === null ? null : {first},
  ...
);

This works because Object.assign will skip over null parameters.

If you are sure that the property value is not going to be "falsy", then it would be bit shorter to write:

let data = Object.assign({},
  first && {first},
  ...
);

Assuming the object is going to be stringified at some point, since stringification ignores undefined values, you could also try

let data = {
  first: first === null ? undefined : first,
  ...
}

edited Jan 9, 2020 at 10:55

pho_pho

74412 silver badges32 bronze badges

answered Nov 17, 2016 at 10:38

user663031

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

2 Comments

Dawid Zbiński Over a year ago

Thank you. I've got it now. I forgot to tell that I'm using typescript and I thought it's going to be similar, but there is no Object.assign function in the ObjectConstructor of typescript when I'm compiling to ES5. I did it with your tip about the stringified data. When I set the data to undefined and not null, they haven't been stringified which was great and easy! Thank you!

SheffDoinWork Over a year ago

Should the || in the first code segment be : per typical ternary construction? Or is this some other sorcery that I'm unfamiliar with?

Jason Carmona · Accepted Answer · 2020-03-02 16:19:27Z

59

Depending on the JS version you are using, you can use the spread operator ...

const getData = data => ({
  ...data.first  && { 'Custom First Prop Name': data.first },
  ...data.second && { 'Custom Second Prop Name': data.second },
  ...data.third  && { third: data.third },
  ...data.fourth && { fourth: data.fourth },
});

answered Mar 2, 2020 at 16:19

Jason Carmona

6215 silver badges6 bronze badges

Comments

Gibolt · Accepted Answer · 2020-07-09 23:28:22Z

13

Non-inline solution

If you don't need to add the value inline, it is pretty straightforward and clean to write your assignment like this.

const val1 = 1
const val2
const data = {}

val1 && (data.a = val1) // 1
val2 && (data.b = val2) // Not added
// data = { a : 1 }

NOTE: This will not work if the value is falsey

answered Jul 9, 2020 at 23:28

Gibolt

47.9k15 gold badges208 silver badges134 bronze badges

1 Comment

Sahin Over a year ago

Paranthesis was what I missed

Adrian Mole · Accepted Answer · 2024-02-23 08:19:44Z

2

Easy way:

const example = {
   ...(foo?.bar && {nested: 1})
}

edited Feb 23, 2024 at 8:19

Adrian Mole

52.2k193 gold badges61 silver badges101 bronze badges

answered Feb 22, 2024 at 20:42

CommonSenseCode

25.7k39 gold badges151 silver badges200 bronze badges

Collectives™ on Stack Overflow

Add property to object when it's not null

4 Answers 4

2 Comments

Comments

Non-inline solution

1 Comment

Easy way:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Non-inline solution

1 Comment

Easy way:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related