Why can't I use a map iterating and object by its keys?

Question

I have this object

layouts = {
                lg: [
                    { i: 'a', x: 0, y: 0, w: 5.9, h: 3.2 },
                    { i: 'b', x: 6, y: 0, w: 5.9, h: 3.2 },
                    { i: 'c', x: 0, y: 6, w: 11.9, h: 3.2 }
                ],
                md: [
                    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
                    { i: 'b', x: 1, y: 0, w: 3, h: 2 },
                    { i: 'c', x: 4, y: 2, w: 1, h: 2 }
                ],
                sm: [
                    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
                    { i: 'b', x: 1, y: 0, w: 3, h: 2 },
                    { i: 'c', x: 4, y: 2, w: 1, h: 2 }
                ],
                xs: [
                    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
                    { i: 'b', x: 1, y: 0, w: 3, h: 2 },
                    { i: 'c', x: 4, y: 2, w: 1, h: 2 }
                ],
                xxs: [
                    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
                    { i: 'b', x: 1, y: 0, w: 3, h: 2 },
                    { i: 'c', x: 4, y: 2, w: 1, h: 2 }
                ]
            }

In a function I have this

 var removeIndex = layouts.lg.map(function (item) { return item.i; }).indexOf(id);
    ~removeIndex && layouts.lg.splice(removeIndex, 1);
    var removeIndex = layouts.md.map(function (item) { return item.i; }).indexOf(id);
    ~removeIndex && layouts.md.splice(removeIndex, 1);
    var removeIndex = layouts.sm.map(function (item) { return item.i; }).indexOf(id);
    ~removeIndex && layouts.sm.splice(removeIndex, 1);
    var removeIndex = layouts.xs.map(function (item) { return item.i; }).indexOf(id);
    ~removeIndex && layouts.xs.splice(removeIndex, 1);
    var removeIndex = layouts.xxs.map(function (item) { return item.i; }).indexOf(id);
    ~removeIndex && layouts.xxs.splice(removeIndex, 1);

To remove all the elements containing the "id" value, which equals to I in the objects.

It works fine that way, if I click on remove(a) , it will remove all the a coincidences. Or C or b , depends of the parameters.

Problem is that I wanted to convert that to something more readable so I did this.

for(let key in layouts){
        console.log(key) //lg ---> should continue with md, sm , xs, xxs
        var removeIndex = layouts.key.map(function (item) { return item.i; }).indexOf(id);
        ~removeIndex && layouts.key.splice(removeIndex, 1);
    }

But it crashes

Uncaught TypeError: Cannot read property 'map' of undefined

How can I read those values then?

`layouts.key` should be `layouts[key]` https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable — Umair Khan, Apr 15 '20 at 08:59
And `map` is the wrong tool for this. Use `filter`, or if you really want to keep the array and modify it in place, use `findIndex`. — T.J. Crowder, Apr 15 '20 at 09:00

Nina Scholz · Accepted Answer · 2020-04-15T09:02:52.967

1

You could use Array#findIndex instead of mapping and indexOf.

for (let key in layouts) {
    let removeIndex = layouts[key].findIndex(({ i }) => i === id);
    if (removeIndex !== -1) layouts[key].splice(removeIndex, 1);
}

edited Apr 15 '20 at 09:02

answered Apr 15 '20 at 09:01

Nina Scholz

376,160
25
347
392

Surely this is just a duplicate of [this](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable), and perhaps [this](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object). – T.J. Crowder Apr 15 '20 at 09:02

Why can't I use a map iterating and object by its keys?

1 Answers1