How to place values from html inputs into a javascript array of objects

Question

I have three inputs which will be given by the user and i want these 3 inputs to make up objects in an array in my javascript file, i.e, the values for these 3 inputs will make up each object in thearray, everytime the user inputs the 3 values and clicks enter, a new object with those 3 values as properties should be added into the array. How do i achieve this?

I have tried to get the values, and onclick to push them into the array but i keep get a "Cannot access 'arr_items' before initialization at addName"

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");
const arr_items = [];
let i = 0;

function addValues() {
  arr_items[i].name.push(input2.value);
  arr_items[i].weight.push(input3.value);
  arr_items[i].value.push(input4.value);
  i++;
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" placeholder="enter item name">
  <button onclick="addValues()" id="name">Enter</button>
  <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" placeholder="enter item value">
</div>

I expect everytime the user inputs the 3 values and clicks enter, a new object with those 3 values as properties should be added into the array.

Arup Rakshit · Accepted Answer · 2019-04-26 21:17:17Z

1

You are trying to call the property name, weight etc on the array element using .. This is wrong. Try do:

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");

const arr_items = [];
let i = 0;

function addValues() {
  arr_items[i] = {
    name: input2.value,
    weight: input3.value,
    value: input4.value
  };

  i++;
  console.log(arr_items)
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" placeholder="enter item name">
  <button onclick="addValues()" id="name">Enter</button>
  <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" placeholder="enter item value">
</div>

answered Apr 26, 2019 at 21:17

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

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

Comments

ChimaJ · Accepted Answer · 2019-04-26 22:12:05Z

0

You were doing it wrongly try this:

      const arrayItems = new Array();

      function addValues(){
        let input2 = document.getElementById("itemName");
        let input3 = document.getElementById("itemWeight");
        let input4 = document.getElementById("itemValue");
        let inputs = {
            input1 : input2.value,
            input3 : input3.value,
            input4 : input4.value
        }
        
        arrayItems.push(inputs);
        console.log(arrayItems);
      }

<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addValues()" id="name">Enter</button>
</div>

answered Apr 26, 2019 at 22:12

ChimaJ

1639 bronze badges

1 Comment

dClint Over a year ago

ggreat, can you assist me with this stackoverflow.com/q/55876351/11250543

Alonad · Accepted Answer · 2019-04-26 21:44:01Z

0

You can just push to array again and again without counter. Like so:

let input2 = document.getElementById("itemName");
let input3 = document.getElementById("itemWeight");
let input4 = document.getElementById("itemValue");

const arr_items = [];

function addValues() {
  arr_items.push({name: input2.value, weight: input3.value, value: input4.value});
  console.log(arr_items);
}

answered Apr 26, 2019 at 21:44

Alonad

2,27421 silver badges20 bronze badges

Comments

Intervalia · Accepted Answer · 2019-04-26 21:48:42Z

Here is a small chunk of code, that I stripped down, that takes every input field, within a parent, that has a name attribute and uses those name attribute values as the keys in an object.

If uses the value of the input fields as the values in the object.

This allows the output object to change based on which input fields are in the parent element. If the input element does not have a name then it is not included.

This code can be reused and it always hands back the object needed.

const getEls = srcEl => {
  const subs = [...srcEl.querySelectorAll('[name]')];
  return subs.reduce((acc, sub) => {
    acc[sub.getAttribute('name')] = sub.value;
    sub.value = '';
    return acc;
  }, {});
  
  subs[0].focus();
}

let results = [];

function doIt() {
  const srcEl = document.getElementById('container');
  const values = getEls(srcEl);
  results.push(values);
  console.log(JSON.stringify(values,0,20));
}

const btn = document.getElementById('submit');
btn.addEventListener('click', doIt);

const resultsBtn = document.getElementById('show');
resultsBtn.addEventListener('click', () => {
  console.log(JSON.stringify(results,0,2));
});

<div id="container">
  <p>Items Information:</p>
  <input id="itemName" name="name" type="text" placeholder="enter item name"/><br/>
  <input id="itemWeight" name="weight" type="number" placeholder="enter item weight(kg)"/><br/>
  <input id="itemValue" name="value" type="number" placeholder="enter item value"/><br/>
  <button id="submit">Enter</button>
  <hr/>
  <button id="show">Results</button>
</div>

Rachel Gallen · Accepted Answer · 2019-04-26 22:26:12Z

0

There are two main aspects to note in the answer. One is that the array should be declared as a variable (not a constant), the other is that you should move the input var code into the function.

I added an alert so that you can see the outcome (wasn't sure if you wanted to allow them to be added without weight etc? This would cause confusion in your storage/retrieval of data.. so I moved the enter button)

Hope this helps

var arr_items = [];
function addValues() {

  let input2 = document.getElementById("itemName");
  let input3 = document.getElementById("itemWeight");
  let input4 = document.getElementById("itemValue");

  var item2 = input2.value + " " + input3.value + " " + input4.value;
  arr_items.push(item2);
  alert( [arr_items]);
}

<div>
  <p>Items Information:</p>
  <input id="itemName" type="text" name="item" placeholder="enter item name">
  <input id="itemWeight" type="number" name="item" placeholder="enter item weight(kg)">
  <input id="itemValue" type="number" name="item" placeholder="enter item value">
  <button id="name" onclick="addValues()">Enter</button>
</div>

edited Apr 26, 2019 at 22:26

answered Apr 26, 2019 at 21:39

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

3 Comments

Rachel Gallen Over a year ago

Regarding the storage/retrieval, you can see from the other answer that if you add only a name, and then the same name with weight etc, you have 2 records then; the first is not overwritten by the second. That's what I meant by confusion..

dClint Over a year ago

thank you for your answer but according to your code, the item 2 variable added to the array is not an object. That is what i am trying to achieve. The array is supposed to contain objects with properties of name,weight and value which it gets from the user inputs.

Rachel Gallen Over a year ago

@dClint it does just that. I moved the declaration of the array outside the function (that was my bad) - and ran entered multiple values. The array is just that - an array!

Collectives™ on Stack Overflow

How to place values from html inputs into a javascript array of objects

5 Answers 5

Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related