1

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?

Reporter
  • 3,897
  • 5
  • 33
  • 47
mouchin777
  • 1,428
  • 1
  • 31
  • 59
  • 3
    `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
  • 1
    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
  • @UmairKhan that was it thanks – mouchin777 Apr 15 '20 at 09:02

1 Answers1

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