In JavaScript how to use a for loop iterator number to make object property keys unique?

Question

I have an object which I need to populate with unique property names and data and to build this dynamically inside a for loop. I'd like to make use of the for loop iterator number to append onto the property name (just to make it unique) but as I'm already adding a variable to the parent property I'm confused on the syntax to achieve this.

This outlines the resulting object structure I'd like to achieve. The properties that need the iterator number adding to are slotContent0, slotContent1 etc.

slotObj
    slot1
          slotContent0 
              templateNo: '1',
              assetId: 'asset-123'
          slotContent1
              templateNo: '4',
              assetId: 'asset-234'
    slot2
          slotContent0
              templateNo: '1',
              assetId: 'asset-456'
          slotContent1
              templateNo: '4',
              assetId: 'asset-678'
          slotContent2
              templateNo: '4',
              assetId: 'asset-879'
    slot3
    etc...

This is my code so far.

var slotObj = {};
var slotId = 'slot1' // hardcoded for SO but this is populated via a parent for loop so would be dynamic ie. slot1, slot2, slot3 etc

for (var i = 0; i < assetList.length; i++) {

    var assetItem = assetList[i];

    slotObj[slotId] = {
        'slotContent': { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
            'templateNo': assetItem.dataset.template,
            'assetId': assetItem.dataset.contentId
        }
    }
}

So to summarise how do I append the for loop iterator [i] to my slotContent property?

Possible duplicate of [How to use a variable for a key in a JavaScript object literal?](https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal) — stealththeninja, Mar 19 '19 at 17:30
May I ask why you want to achieve this? You’d get to the same result using arrays, your properties looks like they bear the same kind of objects, after all.... — Davide Vitali, Mar 19 '19 at 17:42
Thanks for your help all. @Bergi Sorry for the newbie question, but can you explain why an array should be used instead? — Damodog, Mar 20 '19 at 08:48
@Davide This object get's accessed and looped through in my popup.js js file (this is a chrome extension) to render in the extension popup. My code worked for single slotContent entries so it seemed easier to just adapt what I had to create unique slotContent properties where multiple templateNo's and assetId's are found. — Damodog, Mar 20 '19 at 08:48
@Damodog Because it's much easier to work with and the intuitive appropriate structure for this data. Can you explain why you would want the names `slot` and `slotContent` in the numbered properties? — Bergi, Mar 20 '19 at 09:26
@Bergi Thanks for the reply. I'm displaying the `slot` name in my popup which is why I'm using `slotObj[slotId]` to create the property name from a variable with this name in. I suppose `slotContent` doesn't have to be a name. This is just inherited from my code before I added the for loop. So are you saying it could be like this? slot1 ['1', 'asset-123'], ['4', 'asset-234'] slot2 — Damodog, Mar 20 '19 at 10:37
@Damodog I mean `const slotObj = [[{templateNo: '1', assetId: 'asset-123'}, {templateNo: '4', assetId: 'asset-234'}], […], …];` — Bergi, Mar 20 '19 at 10:44

score 4 · Answer 1 · answered Mar 19 '19 at 17:28

You can use square bracket notation to generate the key:

    slotObj[slotId] = {
        ['slotContent' + i]: { // <-- made unique using iterator ;)
            'templateNo': assetItem.dataset.template,
            'assetId': assetItem.dataset.contentId
        }
    }

score 2 · Accepted Answer · answered Mar 19 '19 at 18:09

let slotObj = {};
let slotId = 'slot1' // hardcoded for SO but this is populated via a parent for loop so would be slot2, slot3 etc
slotObj[slotId] = {};

for (let i = 0; i < assetList.length; i++) {

    let assetItem = assetList[i];

    slotObj[slotId]['slotContent'+i] = 
    { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
        'templateNo': assetItem.dataset.template,
        'assetId': assetItem.dataset.contentId
    }
}

Thanks @alexey-zelenin this was what I was looking for! :-) The above works perfectly! — Damodog, Mar 20 '19 at 08:40

score 1 · Answer 3 · answered Mar 19 '19 at 17:28

1

I don't think, you can achieve this with the JSON syntax. But, you can assign the properties one by one:

for (var i = 0; i < assetList.length; i++) {
  var assetItem = assetList[i];

  slotObj[slotId] = {};
  slotObj[slotId]['slotContent' + i] = {
    'templateNo': assetItem.dataset.template,
    'assetId': assetItem.dataset.contentId
  };
}

answered Mar 19 '19 at 17:28

Christoph Herold

1,799
13
18

Also known as "computed property names" in ES6: http://es6-features.org/#ComputedPropertyNames – noviewpoint Mar 19 '19 at 17:29
`slotObj[slotId] = {};` would definitely need to be outside of the loop – Bergi Mar 19 '19 at 17:30
@noviewpoint No, this has nothing to do with computed property names, those are for object literals. Maybe you meant to post your comment on Mattias' answer? – Bergi Mar 19 '19 at 17:31
Yep, you're right, I commented on the wrong answer :) – noviewpoint Mar 20 '19 at 18:49

score 1 · Answer 4 · answered Mar 19 '19 at 17:37

You could use a template literal;

  slotObj[slotId] = {
      `slotContent${i}`: { // <-- how to make this unique using iterator ie. slotContent0, slotContent1 etc...
          'templateNo': assetItem.dataset.template,
          'assetId': assetItem.dataset.contentId
      }
  }

In JavaScript how to use a for loop iterator number to make object property keys unique?

4 Answers4