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? — stealththeninja
– stealththeninja, Commented Mar 19, 2019 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
– Davide Vitali, Commented Mar 19, 2019 at 17:42
@Damodog I mean const slotObj = [[{templateNo: '1', assetId: 'asset-123'}, {templateNo: '4', assetId: 'asset-234'}], […], …]; — Bergi
– Bergi, Commented Mar 20, 2019 at 10:44

Mattias Martens · Accepted Answer · 2019-03-19 17:28:08Z

4

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

answered Mar 19, 2019 at 17:28

Mattias Martens

1,68717 silver badges18 bronze badges

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

Comments

Alexey Zelenin · Accepted Answer · 2019-03-19 18:09:17Z

2

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

answered Mar 19, 2019 at 18:09

Alexey Zelenin

7204 silver badges11 bronze badges

1 Comment

Damodog Over a year ago

Thanks @alexey-zelenin this was what I was looking for! :-) The above works perfectly!

Christoph Herold · Accepted Answer · 2019-03-19 17:28:27Z

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, 2019 at 17:28

Christoph Herold

1,81914 silver badges18 bronze badges

4 Comments

noviewpoint Over a year ago

Also known as "computed property names" in ES6: es6-features.org/#ComputedPropertyNames

Bergi Over a year ago

slotObj[slotId] = {}; would definitely need to be outside of the loop

Bergi Over a year ago

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

noviewpoint Over a year ago

Yep, you're right, I commented on the wrong answer :)

Someone · Accepted Answer · 2019-03-19 17:37:21Z

1

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

answered Mar 19, 2019 at 17:37

Someone

3,5881 gold badge28 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related