Add object into an object using push()

Question

I am looping through some items to add their values to an array. I then push everything into an object and that is working fine, but I am trying without any success to add each elements[i] as an object and setup a unique name for it.

How do I create an object "steps" with two objects inside with names "name1" and "name2"?

var steps = [];
var elements = $("#roi--calc input");
var results = $('#results');

 results.on('click', function(){
    for (var i = 0; i < elements.length; i++) {
     if (elements[i].value.length != 0) {
       steps.push({
         value: elements[i].value
       });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<form id="roi--calc">
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
  <input type="submit" id="results" value="submit" />
 </form>

input type="text" has no checked property. Did you mean input type="checkbox"? — connexo
– connexo, Commented Jan 22, 2019 at 11:10
I made my code a bit shorter... i am using mutliple inputs inside it. i will update the loop to avoid any misunderstandigs. — Wojciech
– Wojciech, Commented Jan 22, 2019 at 11:13
Your problem is that this script only runs once, when the page first loads - when there is no value in either input. So the if statement fails. I presume you want this called when the user changes any values - in which case you need this code inside an event listener. — Robin Zigmond
– Robin Zigmond, Commented Jan 22, 2019 at 11:13

connexo · Accepted Answer · 2019-01-22 11:27:41Z

1

I'd recommend using an object instead of an array. You store the values in the object using the input element's data-name as key. To make sure your object is always up to date, adjust it every time the form catches an input event:

const steps = {}

document.getElementById('roi--calc').addEventListener('input', function(evt) {
  const input = evt.target
  if (input.checked || input.value.length) {
    steps[input.dataset.name] = {
      value: input.value
    }
  } else {
    delete steps[input.dataset.name]
  }
  console.log(steps);
})

<form id="roi--calc">
  <input type="checkbox" value="checkbox" id="cb1" data-name="name0" />
  <input type="text" id="input1" data-name="name1" />
  <input type="text" id="input2" data-name="name2" />
</form>

edited Jan 22, 2019 at 11:27

answered Jan 22, 2019 at 11:19

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

Comments

Umair Farooq · Accepted Answer · 2019-01-22 11:07:35Z

0

You can use following:

var steps = {};
steps[elements[i].name] = elements[i].value;

<form id="roi--calc">
  <input type="text" id="input1" name="name1" />
   <input type="text" id="input2" name="name2" />
</form>

answered Jan 22, 2019 at 11:07

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Comments

Dhaval Chaudhary · Accepted Answer · 2019-01-22 11:10:45Z

0

Try this:

var steps = {};
var elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
 if (elements[i].value) {
    steps[elements[i].name] = elements[i].value;
  }
}

answered Jan 22, 2019 at 11:10

Dhaval Chaudhary

5,9853 gold badges28 silver badges42 bronze badges

Comments

craPkit · Accepted Answer · 2019-01-22 11:13:43Z

There are multiple JavaScript concepts you might study further, to tackle this problem:

Arrays vs. Objects: https://frontendmayhem.com/javascript-arrays-objects/
Objects in-depth: https://javascript.info/object
Data attributes usage: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Combining that knowledge, we can implement an examplary solution:

const steps = {};
const elements = $("#roi--calc input");
for (var i = 0; i < elements.length; i++) {
  const element = elements[i];
  const key = element.dataset.name;
  if ((elements[i].checked) || (elements[i].value.length != 0)) {
    if (!steps[key]) {
      steps[key] = [];
    }
    steps[key].push({
      value: elements[i].value
    });
  }
}

Collectives™ on Stack Overflow

Add object into an object using push()

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related