Is it possible to populate an Object instance by looping through an array?

Question

I'm making a journal app and need to create an object instance every time inputs are submitted on my html form.

I want to create a loop that takes the inputs in results and converts them to values in a new Object instance. My attempt at this so far gives me an instance with undefined values however. Is this even possible to do?

results = []

function example(a, b){
    this.a = a;
    this.b = b;
}

function getElements(){
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
results.push(a,b)
}

My attempt at a loop to create a new instance of example

function createNewDay(){
    for (i = 0;i<results.length;i++){
    var x = new day([i])
    }
}

When I console.log => example{a:undefined, b:undefined}

Of course it is. you're probably just doing it wrong, but i can't tell given the code in your question... it's a bit unclear what you're trying to accomplish with it. You created a new instance of `day` on each iteration, but did nothing with it, and that sample doesn't seem to have anything to do with the console.log result.. — Kevin B, Sep 29 '16 at 19:28
I'm not completely following you but did you mean to do `results.push(new example(a, b))` and `new day(results[i])`? — Mike Cluck, Sep 29 '16 at 19:30
Basically what I'm trying to do it create a new journal entry every time a "submit" button is clicked on an html form. This journal entry would be a new Object instance. I'm new to programming so this probably isn't the best way, but my reasoning is to push the values to results and then loop through results and make each one a separate property of the new Object instance. So if results = [1,2] then I want the Object instance to look like this => object{a: 1, b:2} — Victoravna, Sep 29 '16 at 19:38
You never call `example`. How does it relate to your question? — trincot, Sep 29 '16 at 19:58
I call it in my original code, sorry I didn't include it here — Victoravna, Sep 29 '16 at 20:24

score 1 · Accepted Answer · answered Sep 29 '16 at 19:49

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input id="a" type="text">
  <input id="b" type="text">
  <button type="submit" id="submit">Submit</button>
  <button type="button" id="view">View results in console</button>
</body>
<script type="text/javascript">
var results = [];

function Example(a, b) {a
  this.a = a;
  this.b = b;
}

function getElements() {
 var a = document.getElementById('a').value;
 var b = document.getElementById('b').value;
 results.push(new Example(a, b));
}

function loopResults() {
  for (var i = 0; i < results.length; i++) {
    console.log(results[i]);
  }
}

document.getElementById('submit').addEventListener('click', getElements, false);
document.getElementById('view').addEventListener('click', loopResults, false);
</script>
</html>

Demo: http://jsbin.com/jehupayomu/1/

Thank you! This is so simple, I'm kicking myself for not thinking of it. — Victoravna, Sep 29 '16 at 20:03

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

So... you can use jquery for that:

var formDataObject = $("refer_to_form_by_id_or_name").serializeObject();

Like mentioned in here: Serialize form data to JSON

edited May 23 '17 at 11:48

Community

1
1

answered Sep 29 '16 at 19:37

Vladimir M

4,403
1
19
24

This question does not include the `jQuery` tag, hence a pure JavaScript solution is expected. – VLAZ Sep 29 '16 at 19:52
perhaps. perhaps author is unaware that some libraries may be helpful here. it wasn't precisely stated that vanilla js solution is wanted. if author will make it clear, I can delete the answer. – Vladimir M Sep 29 '16 at 19:56

score 0 · Answer 3 · answered Sep 29 '16 at 20:31

You can use FormData for this -- which makes it a more general solution:

var form = document.querySelector('form');

form.onsubmit = function () {
    var formdata = new FormData(this);
    var results = {};
    for ([key, value] of formdata) {
        results[key] = value;
    }
    console.log(results);
    return false; // cancel submission
};

<form method="post" action="">
    a: <input name="a" value=""><br>
    b: <input name="b" value=""><br>
    <input type="submit">
</form>

Is it possible to populate an Object instance by looping through an array?

3 Answers3