Incrementing a javascript object name on creation?

Question

I am creating 3 objects of the same name and options, but they can have varying values. These objects are being dynamically created based on a user's input, so I am unable to name them differently, as I am trying to reference them based on their count, or by an incremented value.

My issue right now is that I create 3 objects at the same time, similar to this:

var contentformat = { name:"Test Title 1", 
                      description:"A 5 minute video",
                      icon: ""
                    };

var contentformat = { name:"Test Title 2", 
                      description:"A 3 minute video",
                      icon: ""
                    };

var contentformat = { name:"Test Title 3", 
                      description:"A 10 minute video",
                      icon: ""
                    };

But if I check them in my console, it only shows the "test title 3" object. Is there a way I can have these multiple objects (or increment them on creation?)

You're declaring the same variable 3 times, so you only end up with the last value. As above, use an array and .push() the objects into it. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 26, 2017 at 23:35
Well, they kind of get created in 3 different places, so i'm not sure how it would be done, but no I don't think there would be a problem with putting them in one — knocked loose
– knocked loose, Commented Feb 26, 2017 at 23:35

gyre · Accepted Answer · 2017-02-27 00:58:08Z

3

A variable can only hold one value at a time. Thus, the only object that is stored is the third and final one you assign to contentformat. Try using an array instead.

Edit: It looks like OP mentioned that the objects get created in different places. This is a perfect place to use Array#push(...elements).

var contentformat = []

// Add a single item
contentformat.push({
  name: "Test Title 1",
  description: "A 5 minute video",
  icon: ""
})

// Add multiple items at once
contentformat.push({
  name: "Test Title 2",
  description: "A 3 minute video",
  icon: ""
}, {
  name: "Test Title 3",
  description: "A 10 minute video",
  icon: ""
})

// Get all three items back!
console.log(contentformat)

Edit: Just for the record, the root of the problem was a little different. The problem was solved with a bit of jQuery DOM manipulation:

window.contentformat = []

$('.hs_cos_wrapper_widget').each(function (i) {
  $(this).addClass('tabpanel').attr('id', 'tab' + (i + 1))
  contentformat.push({
    title: $(this).find('.cf_title').text(),
    description: $(this).find('.cf_description').text()
  })
})

edited Feb 27, 2017 at 0:58

answered Feb 26, 2017 at 23:36

gyre

16.8k4 gold badges40 silver badges47 bronze badges

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

8 Comments

knocked loose Over a year ago

So I tried the array method out, but since each one of the objects are essentially getting built on their own file, then being merged to a master, my array is appearing empty each time. Have it working with .push() but it only stores the third one, I imagine it is rewriting my array on each file.

gyre Over a year ago

"built on their own file, then being merged to a master" -- could you clarify this? Are you working in the browser, on separate HTML pages? If you want to store data persistently on the client side over time, you might want to check out HTML5 localStorage.

knocked loose Over a year ago

So, it's kind of a weird set up but I am using a cos system that my company created to build out a template. I will be having users create modules where each of these separate files is a custom module that contains code to help build out the class. So in each of these files, I am getting a name and description, that I want to reference into a JS object, so I can later reference either of the 3 files. I can't make their names object1, 2, etc because I need it to be scalable, so file1 might not always be file1, and so on.

gyre Over a year ago

Are you running Node.js? You might want to take a look at using an existing module system like Node's require.

knocked loose Over a year ago

it was built with node, but the side of it i'm working with doesn't directly utilize it. Maybe this explanation can shine a little more light on the issue: So basically, when the files merge to the master html file, each of the modules are created in regular HTML, and I run a function to count them and add an id + x to them. So I now have 3 identical modules with ids like tab1, tab2, tab3 allowing me to access them individually. Is there a way i could utilize that to maybe create the array?

|

Chetan · Accepted Answer · 2017-02-26 23:43:31Z

1

You are using the same variable name for all three so it will replace the earlier value with new one that's why you are seeing the last value only.

You should use array instead.

var sample = new Array();
sample [0] = { name:"Test Title 1", 
                  description:"A 5 minute video",
                  icon:""};
sample [1] = { name:"Test Title 2", 
                  description:"A 3 minute video",
                  icon:""};
sample [2] = { name:"Test Title 3", 
                  description:"A 10 minute video",
                  icon:""};

And then you can access elements of array by using index as following.

 var video1 = sample [0];

This should resolve your issue.

answered Feb 26, 2017 at 23:43

Chetan

6,9314 gold badges24 silver badges33 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2017-02-26 23:42:17Z

0

ou can make a function that creates an object for you which relly on a global counter like this:

var COUNTER = 0;                // the counter (must be outside the function and must be initialized)
function creator(desc, icon) {  // take a description and an icon and returns an object
  COUNTER++;                    // increment the counter
  return {
    name: "Test title " + COUNTER,
    description: desc,
    icon: icon
  };
}


console.log(creator("some desc", ""));
console.log(creator("some other desc", ""));
console.log(creator("yet another desc", "icooon"));
// ...

answered Feb 26, 2017 at 23:42

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

Incrementing a javascript object name on creation?

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related