javascript variable key in loop

Question

Using Slickgrid I am trying to set the CSS of a cell using setCellCssStyles method

for (var rowIndx = 1; rowIndx < movmentRows.length; rowIndx++) {
  grid.setCellCssStyles("disabled", {
    rowIndx: {
      san: "slick-cellreadonly",
      ean: "slick-cellreadonly",
    },
  });
}

I understand its because I am using a variable for a key in the for loop. But I don't understand how to make this work. I tried to replace rowIndx with [rowIndx] but I am getting syntax error, so I think my JavaScript is not ES6. Then I tried the following but this is also giving syntax error with -

Encountered '['and Expected keyword or brace.

for(var rowIndx=1;rowIndx<movmentRows.length;rowIndx++){
  var key = {};
  grid.setCellCssStyles("natCol-greyed", {
    key[rowIndx] : {
      sourceAccountNational: "slick-cellreadonly",
      excludeAccountNational: "slick-cellreadonly"
    }
  });
}

Please suggest.

Does this answer your question? [Creating Dynamic Keys In Object](https://stackoverflow.com/questions/53460072/creating-dynamic-keys-in-object) — Garrett Motzner, May 20 '20 at 17:25
You were close: `var key = {}; key[rowIndx] = { sourceAccountNational: "slick-cellreadonly", excludeAccountNational: "slick-cellreadonly" }; grid.setCellCssStyles("natCol-greyed", key);` — Heretic Monkey, May 20 '20 at 17:38
Does this answer your question? [Is it possible to add dynamically named properties to JavaScript object?](https://stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object) — Heretic Monkey, May 20 '20 at 17:42

Alboman · Answer 1 · 2020-05-20T17:53:45.517

0

If movementRows is an array you can use a for...of loop like so:

for (const [index, row] of movmentRows.entries()) { //index is the index of each itteration and row is the value
  grid.setCellCssStyles("disabled", {
    [row]: {
      san: "slick-cellreadonly",
      ean: "slick-cellreadonly",
    },
  });
}

To set an object key as a variable you can put it in brackets..

Note on for..of loop: It is not supported in IE.

More on how to dynamically set object properties

More on For...Of loop

edited May 20 '20 at 17:53

answered May 20 '20 at 17:33

Alboman

325
1
6

If the OP wants the index of the row as the key, this will not work; this will use the array element as the key. – Heretic Monkey May 20 '20 at 17:34
I have updated my answer to support indexes as well. – Alboman May 20 '20 at 17:52

Garrett Motzner · Answer 2 · 2020-05-20T17:50:19.267

0

If you are trying to create an object but want to use a variable for the key, the syntax is as follows:

let keyName = "foo"

let object = { [keyName]: "bar" }
 // gives the object `{"foo": "bar}

in older javascript you have to assign to a key after the object is created:

let keyName = "foo"

let object = {}
object[keyName] = "bar"

Also, I try to never do a "manual" loop when I can use an iterator. It's less error prone than a "manual" loop, and allows you to use different types of collections other than just arrays, so it's more flexible. there are two main ways to do this:

A for … of loop:

let collection = ["a", "b", "c"]

for (let value of collection) {
  console.log("value:", value)
}
// if you also want the index
for (let [index, value] of collection.entries()) {
  console.log("value and index:", value, index)
}
// or _just_ the indexes (note this skip empty values in sparse arrays)
for (let index of collection.keys()) {
  console.log("index:", index)
}

Using forEach:

collection.forEach((item, index) => console.log(item, index))

Both these methods usually work about the same, but the for … of loop is closer to a "manual" loop. However, forEach is a bit older, so may be available more places. Also, take a look at the similar map.

edited May 20 '20 at 17:50

answered May 20 '20 at 17:38

Garrett Motzner

3,021
1
13
30

No, don't look at `map` unless you are using the output, which is another array. Also, the OP is using the index of the element in the array, so `for..of` doesn't even make sense. `forEach` would work if you included the `index` argument. But a plain `for` loop is fine – Heretic Monkey May 20 '20 at 17:41
I mentioned `map` because I see so many people pushing to arrays instead of using map :). But yes, for this specific case, `forEach` is better. But, also, check out `map` for future reference. – Garrett Motzner May 20 '20 at 17:45
I see so many people using `map` for side effects instead of using `forEach` or a plain `for` loop :). – Heretic Monkey May 20 '20 at 17:46
@HereticMonkey that bothers me less, honestly :). But usually I'm tying to remove side effects anyway, so `map` is what I want :). – Garrett Motzner May 20 '20 at 17:56

javascript variable key in loop

2 Answers2