output returns as [object, Object]

Question

I'm writing a code that take user input and stores it in an object array. However it doesn't seem to work the way I want it to. whenever I try to print out the array it just says [object, Object]. Thanks in advance!

let addedProducts = [];
let output = document.getElementById("output");
let productName = document.getElementById("product-name").value;
let productAmount = document.getElementById("amount-stored").value;

const addProduct = () => {
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product.name);
  addedProducts.push(product.amount);
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = addedProducts;

}

<form>
  <label>ProductName</label>
  <input id="product-name" type="text"><br>
  <label>amount in store</label>
  <input id="amount-stored" type="text"><br>
  <input type="button" value="add product in array" onclick="addProduct()">
  <input type="button" value="show products in array" onclick="showProducts()">
</form>
<p id="output"></p>

What are you tring to achieve here? How do you want the output to be? — Dhruv Tailor, Dec 08 '20 at 14:54
_“whenever I try to print out the array it just says [object, Object]”_ - that just means that you are trying to force an object into a string context. You need to access the individual array elements, or join them together to a string first. — CBroe, Dec 08 '20 at 14:54
https://stackoverflow.com/questions/8892465/what-does-object-object-mean-javascript/30632434 — CBroe, Dec 08 '20 at 14:54
I believe the problem is that the input data isn't stored at all... — KidRonee, Dec 08 '20 at 15:01

score 2 · Answer 1 · answered Dec 08 '20 at 15:01

Make sure you read values within addProduct:

const addProduct = () => {
  let productName = document.getElementById("product-name").value;
  let productAmount = document.getElementById("amount-stored").value;
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product);;
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = JSON.stringify(addedProducts, null, '\t');
}

let addedProducts = [];
let output = document.getElementById("output");


const addProduct = () => {
  let productName = document.getElementById("product-name").value;
  let productAmount = document.getElementById("amount-stored").value;
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product);;
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = JSON.stringify(addedProducts, null, '\t');
}

<form>
  <label>ProductName</label>
  <input id="product-name" type="text"><br>
  <label>amount in store</label>
  <input id="amount-stored" type="text"><br>
  <input type="button" value="add product in array" onclick="addProduct()">
  <input type="button" value="show products in array" onclick="showProducts()">
</form>
<p id="output"></p>

score 1 · Accepted Answer · answered Dec 08 '20 at 15:00

The productName and productAmount are defined when your code is loaded, so they default to "".

When you click the buttons, the values have not been updated so you just add empty strings to addedProducts.

Try the following:

let addedProducts = [];
let output = document.getElementById("output");

const addProduct = () => {
  let productName = document.getElementById("product-name").value;
  let productAmount = document.getElementById("amount-stored").value;
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product.name);
  addedProducts.push(product.amount);
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = addedProducts;
}

@KidRonee I updated the answer with a code sample. Please try that. — anpel, Dec 08 '20 at 15:04

ley · Answer 3 · 2020-12-08T15:01:06.067

0

you have to print every element like:

const showProducts = () => {
        foreach(addedProducts as addedproduct)
            output.innerHTML =  output.innerHTML + addedproduct;
    }

either:

you have to write your code on event callback like onChange() method.

edited Dec 08 '20 at 15:01

answered Dec 08 '20 at 14:57

ley

1
1

i didnt mean your product, what i was meaning was the foreach element. so i edit the answer – ley Dec 08 '20 at 15:01

output returns as [object, Object]

3 Answers3