Access dynamically created objects in Javascript

Question

I am attempting to dynamically create an object with name-value pairs using html input fields. This is what i have so far:

var taskComplete = {
  newTask: function(arg) {
    var fieldObj = {},
        selector = arg,
        inputFields = document.getElementsByClassName(selector);          
    for (var i=0;i<inputFields.length;i++) {
      var attrValue = inputFields[i].getAttribute("name"),
          value = inputFields[i].value, 
          newFieldObj = fieldObj[i] = {[attrValue]: value };
      console.log(newFieldObj);             
    }      
  }
}
taskComplete.newTask('input');

The console log outputs:

Object {title: ""}
Object {description: ""}
Object {date: ""}

Question1: How do i access these objects? they all share the same name eg. 'Object' so 'object.title' does not work.

Question2: Is there a way to combine these objects into a single object? eg.

var obj = {
  title: "",
  description: "",
  date: "",
}

code example with html: codepen.io

Hope this make sense. Thank you for any and all assistance.

Dimitris Karagiannis · Accepted Answer · 2016-03-12 23:34:24Z

3

I will answer your questions in the reverse order, makes more sense, you will see.

Question2: Is there a way to combine these objects into a single object?

Yes, I am happy to inform you that you absolutely can. Where you do

newFieldObj = fieldObj[i] = {[attrValue]: value };

simply do

fieldObj[attrValue] = value;

What this does, is the following: On the fieldObj, which is a plain {} set a key named after the value of attrValue and pair that key with the value value

Question1: How do i access these objects? they all share the same name eg. 'Object' so 'object.title' does not work.

In order to be able to access these objects, your newTask method should be returning them. So, at the end of your newTask method, simply do return fieldObj; like so

var taskComplete = {
  newTask: function(arg) {
    var fieldObj = {},
        selector = arg,
        inputFields = document.getElementsByClassName(selector),
        attrValue,
        value;

    for (var i=0;i<inputFields.length;i++) {
      attrValue = inputFields[i].getAttribute("name");
      value = inputFields[i].value;
      fieldObj[attrValue] = value;     
    }      
    return fieldObj;
  }
}

and then store the returned value to a new variable like so:

var aFancyName = taskComplete.newTask('input');

Here's the modified pen: http://codepen.io/anon/pen/XdjKQJ

edited Mar 12, 2016 at 23:34

answered Mar 12, 2016 at 23:28

Dimitris Karagiannis

9,4669 gold badges45 silver badges74 bronze badges

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

3 Comments

Frederick M. Rogers Over a year ago

Thank you for the explanation! I made the changes to the newTask() functiion, which now returns the objects. However i am still a bit unclear as to how i access them. Using your example, would i acces objects like this? eks: aFancyName.title, aFancyName.description, aFancyName.date. Thank you so much for your help.

Dimitris Karagiannis Over a year ago

Yes, that's exactly how you access them! If you found my answer helpful and resolved your question consider marking it as an accepted answer.

Frederick M. Rogers Over a year ago

lol i kept trying "console.log(aFancyName.title) wich only returned a empty line in the console. Took me a few min to realize it was because the object property was missing a value. Thank you so much for you help and have a nice day!

Ted A. · Accepted Answer · 2016-03-12 23:26:59Z

3

Not super clear on what you are trying to do here.

Instead of creating a new object for each iteration of your loop, why not just assign those properties to the fieldObj you already have?

Then you can just return that object and do whatever you want with it in the calling code:

'use strict';

// ** TASK OBJECT ** //
var taskComplete = {
  newTask: function(selector) {
    var fieldObj = {},
        inputFields = document.getElementsByClassName(selector);

    for (var i = 0; i < inputFields.length; i++) {
      var attrKey = inputFields[i].getAttribute("name"),
          value = inputFields[i].value;

      fieldObj[attrKey] = value;
    }

    return fieldObj;
  }
}
var o = taskComplete.newTask('input');
console.dir(o);

http://codepen.io/anon/pen/reMLPB?editors=0010

answered Mar 12, 2016 at 23:26

Ted A.

2,30217 silver badges22 bronze badges

1 Comment

Frederick M. Rogers Over a year ago

Thank you for you response. I sorry if my description was difficult to understand. You figured it out though and your response was just what i needed!

Collectives™ on Stack Overflow

Access dynamically created objects in Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related