How to Create a New Variable with Every Object Instance

Question

I've built a script that creates a new 'gridItem' object instance for each grid item. The problem is, every new grid item doesn't declare a new variable but instead overwrites the 'obj' variable. I'd rather declare a new variable for each object instance, such as obj1, obj2, etc.

I've tried to do this by using a counting variable as follows:

obj + 'id' = new gridItem(title, id); // hoped for obj1, obj2, etc

But this fails. Does anyone know how to do this, and the best way of doing so? Thanks for any help here.

Codepen: https://codepen.io/anon/pen/ebKXGQ

let gridItems = document.querySelectorAll('.grid-item'), id = 0, objects = [];

for (let item of gridItems) {
 id++;
 var title = item.querySelector('.grid-text-content h2').textContent,
     obj = new gridItem(title, id);

 objects.push(obj);
}

function gridItem(title, id) {
 this.title = title;
 this.id = id;
}

document.getElementsByTagName('p')[0].textContent = 'obj variable: ' + JSON.stringify(obj, null) + ' - I want to be able to use obj1, obj2, obj3 and obj4';

/* Grid Test */
.grid-nick {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    grid-column-gap: 2%;
    background: lightblue;
}
.grid-item, .grid-text-content {
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
}
.grid-text-content {
    padding: 10px;
}
.grid-item img { width: 100% }
.grid-item h2 {
    margin-bottom: 0;
}
.grid-item .grid-text.price {
    padding: 20px 0;
    font-size: 2em;
}
.grid-item .grid-text .description {}
.grid-item .grid-btn {}

<div class='grid-nick'>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Header Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Another Header Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>And This Here</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
        <h2>Last Header</h2>
        <span class='grid-text price'>$81.52</span>
        <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
        <button class='grid-btn cart'>Add to Cart</button>
    </div>
</div>
  
</div>

<p>changes</p>

Do you have a strict requirement to use variables? You can just use an object and access each object with its id `objects[0]` — Callam, Jan 23 '19 at 09:21
You can use Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Description) like so: `var obj2 = Object.assign({}, obj1)`. _"The Object.assign() method only copies enumerable and own properties from a source object to a target object."_ — sbolel, Jan 23 '19 at 09:24
Just curious to see if there's a way with variables instead of objects[n] — user8758206, Jan 23 '19 at 09:27
one suggestion is create an empty array like `var obj = [];` and then you want to create the new object ,you can create like that `obj.push( new gridItem(title, id));` thats how you get a new object of every index of the obj variable — Khizar Sulehri, Jan 23 '19 at 09:29

Callam · Accepted Answer · 2019-01-23T09:37:57.823

function getGridItemTitle(item) {
  return item.querySelector('.grid-text-content h2').textContent;
}

function gridItem(title, id) {
  this.title = title;
  this.id = id;
}

function toObject(item, index) {
  return new gridItem(getGridItemTitle(item), index)
}

const gridItems = document.querySelectorAll('.grid-item');
const objects = [...gridItems].map(toObject);

function updateChanges(i) {
  const json = JSON.stringify(objects[i], null);
  const p = document.getElementById('changes');
  
  p.textContent = `obj${i} variable: ${json}`;
}

updateChanges(0)

/* Grid Test */

.grid-nick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  grid-column-gap: 2%;
  background: lightblue;
}

.grid-item,
.grid-text-content {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
}

.grid-text-content {
  padding: 10px;
}

.grid-item img {
  width: 100%
}

.grid-item h2 {
  margin-bottom: 0;
}

.grid-item .grid-text.price {
  padding: 20px 0;
  font-size: 2em;
}

.grid-item .grid-text .description {}

.grid-item .grid-btn {}

<div class='grid-nick'>
  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Header Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Another Header Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>And This Here</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>

  <div class='grid-item'>
    <img src='http://www.krugerpark.co.za/images/1-lion-charge-gc590a.jpg'>
    <div class='grid-text-content'>
      <h2>Last Header</h2>
      <span class='grid-text price'>$81.52</span>
      <span class='grid-text description'>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</span>
      <button class='grid-btn cart'>Add to Cart</button>
    </div>
  </div>
</div>

<p id="changes"><!-- CHANGES --></p>

How to Create a New Variable with Every Object Instance

1 Answers1