How to trim array elements inside an array?

Question

I have an array like this:

const allData = 
[
  ['Alex   ','foo@email','   ',],
  ['  ','goo@gmail, '232-333-2222'],
]

I want to trim all values within the array so that for example 'Alex ' becomes 'Alex'.

I have tried these solutions:

for (let data of allData.entries()) {
    for (let content of data) {
        content.trim();
    }
}

allData.forEach((data) => {
    data.forEach((content) => {
        content.trim();
    });
});

allData.map((data, index) => {
    return data.map((content) => content.trim());
});

I have tried content = content.trim(); for all of them as well.

But even though it does trim the value it won't save the modified value in the array.

What am I missing? I want allData to contain the trimmed values.

`content.trim();` by itself is just an expression with no change because its not being assigned to anything. — GetSet, Feb 07 '21 at 10:27
Your code does the trimming but does not store the trimmed value back to the array. — Krisztián Balla, Feb 07 '21 at 10:28
`let` creates a scope bound instance. So assigning on that is futile for the other scope — GetSet, Feb 07 '21 at 10:31
`trim` doesn't modify the original string as they are immutable. You need to replace the array's index by changing the inner forEach to: `data.forEach((content, i) => data[i] = content.trim() )` — adiga, Feb 07 '21 at 10:33
This is what I wanted. Thank you for the other answers as well :) — ozansozuoz, Feb 07 '21 at 10:39
And `content = content.trim()` just reassigns the local parameter `content` with the trimmed string. It will not update the original array. — adiga, Feb 07 '21 at 10:42

Zoli Szabó · Accepted Answer · 2021-02-07T10:41:11.893

2

There are no issues with your code (the third version). The only misunderstanding is that .map() does not modify the original array, but return a new one. Look:

// This is basically your code.
const allData = 
[
  ['Alex   ','foo@email','   ',],
  ['  ','goo@gmail', '232-333-2222'],
];

 const trimmedAllData = allData.map((data, index) => {
    return data.map((content) => content.trim());
 });
 
 console.log(trimmedAllData);

Your second try can be easily fixed to modify the original allData values:

const allData = 
[
  ['Alex   ','foo@email','   '],
  ['  ','goo@gmail', '232-333-2222'],
];

allData.forEach((data, i) => {
    data.forEach((content, j) => {
        allData[i][j] = content.trim(); // You have to write the trimmed value back!
    });
});
 
console.log(allData);

The first version is not a good enough approach.

edited Feb 07 '21 at 10:41

answered Feb 07 '21 at 10:28

Zoli Szabó

4,366
1
13
19

This has nothing to with `map` not modifying the original array. Even `forEach` isn't working for OP – adiga Feb 07 '21 at 10:30
@adiga: I think it does. The OP has a basic misconception there as you can clearly see looking at his/her first and second solution. For the third one I think it is basically the same problem. So while this provides a solution I am not sure that it entirely removes the misconception the OP has. – Krisztián Balla Feb 07 '21 at 10:33
@KrisztiánBalla the answer doesn't explain why `content.trim()` doesn't work in `forEach` or why `content = content.trim()` doesn't work. – adiga Feb 07 '21 at 10:36
@adiga I thought that is just what I've said. :-) – Krisztián Balla Feb 07 '21 at 10:41
Thanks everyone. I have extended my answer a bit in order to make it more understandable. – Zoli Szabó Feb 07 '21 at 10:42

Majed Badawi · Answer 2 · 2021-02-07T10:39:44.180

You can use two nested .map and save the result in a new variable res:

const allData = 
[
  ['Alex   ','foo@email','   ',],
  ['  ','goo@gmail', '232-333-2222'],
];

const res = allData.map( arr => arr.map(e => e.trim()) );

console.log(res);

If you want to use the for loops, you need to directly change the elements:

const allData = 
[
  ['Alex   ','foo@email','   ',],
  ['  ','goo@gmail', '232-333-2222'],
];

allData.forEach((data,i) => {
  data.forEach((content,j) => {
    allData[i][j] = content.trim();
  });
});

console.log(allData);

How to trim array elements inside an array?

2 Answers2