How to trim array elements inside an array? [duplicate]

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
– GetSet, Commented Feb 7, 2021 at 10:27
Your code does the trimming but does not store the trimmed value back to the array. — Krisztián Balla
– Krisztián Balla, Commented Feb 7, 2021 at 10:28
let creates a scope bound instance. So assigning on that is futile for the other scope — GetSet
– GetSet, Commented Feb 7, 2021 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
– adiga, Commented Feb 7, 2021 at 10:33
And content = content.trim() just reassigns the local parameter content with the trimmed string. It will not update the original array. — adiga
– adiga, Commented Feb 7, 2021 at 10:42

Zoli Szabó · Accepted Answer · 2021-02-07 10:41:11Z

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 7, 2021 at 10:41

answered Feb 7, 2021 at 10:28

Zoli Szabó

4,5851 gold badge16 silver badges22 bronze badges

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

5 Comments

adiga Over a year ago

This has nothing to with map not modifying the original array. Even forEach isn't working for OP

Krisztián Balla Over a year ago

@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.

adiga Over a year ago

@KrisztiánBalla the answer doesn't explain why content.trim() doesn't work in forEach or why content = content.trim() doesn't work.

Krisztián Balla Over a year ago

@adiga I thought that is just what I've said. :-)

Zoli Szabó Over a year ago

Thanks everyone. I have extended my answer a bit in order to make it more understandable.

Majed Badawi · Accepted Answer · 2021-02-07 10:39:44Z

1

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);

edited Feb 7, 2021 at 10:39

answered Feb 7, 2021 at 10:23

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to trim array elements inside an array? [duplicate]

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related