CODEWITHSUNDEEP
javascriptobject
Frederick M. Rogers
Frederick M. Rogers

Reputation: 921

Access dynamically created objects in Javascript

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.

Upvotes: 2

Views: 160

Answers (2)

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

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

Upvotes: 3

Ted A.
Ted A.

Reputation: 2302

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

Upvotes: 3

Related Questions