JS: conditionally adding adding in the middle of an array?

Question

If i have an array of data,

const data = [
   {
     name: "dog",
     age: 11
   }, 
   {
     name: "cat",
     age: 21,
   }
]

I want to add an object in the middle of that if a condition is true:

const shouldAddNewAnimal = true;

const animal = {
   name: "tiger",
   age : 22,
}

How would I write that without an else ?

const data = [
   {
     name: "dog",
     age: 11
   }, 
   foo ? animal : {};
   {
     name: "cat",
     age: 21,
   }
]

above is the only way I can think of writing it but I dont want to insert an empty object in there if the condition is not true.

Nina Scholz · Answer 1 · 2021-12-16T21:12:59.317

2

You could spread with arrays, one with the wanted object and the other empty.

const
    shouldAddNewAnimal = true,
    animal = { name: "tiger", age: 22 },
    data = [
        { name: "dog", age: 11 },
        ...(shouldAddNewAnimal ? [animal] : []),
        { name: "cat", age: 21 }
    ];

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Dec 16 '21 at 21:12

answered Dec 16 '21 at 20:46

Nina Scholz

376,160
25
347
392

Alex Lomia · Answer 2 · 2021-12-17T16:21:10.960

0

You can use a spread operator:

const foo = true;
const animal = { name: "mouse", age: 10 };

const data = [
   {
     name: "dog",
     age: 11
   }, 
   ...(foo ? [animal] : []),
   {
     name: "cat",
     age: 21,
   }
]

console.log(data);

This will result in the animal being extracted out of its enclosing array and added to the "outer" array.

In the case of "else" path, spreading the null will result in nothing being added to the "outer" array.

edited Dec 17 '21 at 16:21

answered Dec 16 '21 at 20:45

Alex Lomia

6,705
12
53
87

please try with `null`. and try to spread `false` ... – Nina Scholz Dec 16 '21 at 21:11
@NinaScholz it throws an error, strangely... I removed that example. Thank for pointing it out! – Alex Lomia Dec 17 '21 at 16:00
your solution still insert an item, even if `null` to the array. – Nina Scholz Dec 17 '21 at 16:08
You are right, my bad. Fixed it – Alex Lomia Dec 17 '21 at 16:45

score 0 · Answer 3 · answered Dec 16 '21 at 20:51

You may achieve this by adding null's and filtering them out like so using filter

const shouldAddNewAnimal = false;
const animal = {
   name: 'parrot',
   age:12
}

let data = [
   {
     name: "dog",
     age: 11
   }, 
   shouldAddNewAnimal ? animal : null,
   {
     name: "cat",
     age: 21
   }
].filter(item => item !== null);

console.log(data);

const shouldAddNewAnimal = true;
    const animal = {
       name: 'parrot',
       age:12
    }

    let data = [
       {
         name: "dog",
         age: 11
       }, 
       shouldAddNewAnimal ? animal : null,
       {
         name: "cat",
         age: 21
       }
    ].filter(item => item !== null);

    console.log(data);

JS: conditionally adding adding in the middle of an array?

3 Answers3