What is the significance of the term "Object object"?

Question

What is the significance of the term "Object object"?

I am new to javascript and encountering an issue. When I use alert in my script, the output data is shown as [Object object]. The function below is called when the button (onClick) is clicked. There are [Object object] elements in the array. The last line of code, specifically innerHtml, is not functioning properly.

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="center">
    <h1 align="center">Shop Basket</h2>
      <script type="text/javascript" src="external.js"></script>

      <table align="center">
        <tr>
          <th align="left">Price</th>
          <th>Product</th>
          <th></th>
        </tr>
        <script>
          let products = [{
              20: "ssd drive"
            },
            {
              1100: "washing machine"
            },
            {
              219: "tablet"
            },
            {
              500: "monitor"
            },
            {
              789: "i5 processor"
            },
            {
              88: "sound card"
            },
            {
              220: "logitech mouse"
            },
            {
              219: "modecom keyboard"
            },
            {
              900: "gtx 1060"
            },
            {
              823: "rx 570"
            }
          ];
          let shopBasket = [];

          function addToBasket(value) {
            shopBasket.push(value);
            alert(shopBasket);
            document.getElementById("change").innerHtml = "" + shopBasket.length;
          }
          for (let i = 0; i < products.length; i++) {
            for (let key in products[i]) {
              document.write("<tr>");
              document.write("<td>" + key + "</td>");
              document.write("<td>" + products[i][key] + "</td>");
              document.write('<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + products[i] + '\')"/></td>');
              document.write("</tr>");
            }
          }
        </script>

      </table>
      <center>
        <a href="html-link.htm"><img src="shopbasket.jpg" title="basket" alt="basket"></a>
      </center>
  </div>
  <p id="change"></p>
</body>

</html>

Best regards

javascript

Answer 1

Answer №1

If you want to include JSON stringify in your HTML file, you can do it like this:

document.write('<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) +'\')"/></td>');

To parse the JSON in your JS code, add the following:

shopBasket.push(JSON.parse(value));

You can test the difference by running the code snippet and comparing the console output with and without JSON.stringify:

let products = [ 
    {20: "dysk ssd"}, 
    {1100: "pralka"}, 
    {219: "pad"}, 
    {500: "monitor"},
    {789: "i5 processor"},
    {88: "soundblaster"},
    {220: "mysz logitech"}, 
    {219: "klawiatura modecom"},
    {900: "gtx 1060"}, 
    {823: "rx 570"}
];

for (let i = 0; i < products.length; i++) {
   for (let key in products[i]) {
      console.log('Without using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + products[i] + '\')"/></td>');
      console.log('With using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) + '\')"/></td>');
   }

   // only showing the first element
   break;
}

If you parse the string again in your JavaScript function:

AddToBasket('{"20":"dysk ssd"}');

function AddToBasket(value) {
  let parsedBasket = JSON.parse(value);
  
  console.log(parsedBasket);
  
  // your code
}

Update: To resolve the unexpected token issue, move all the JavaScript code to an external file and add an ID to your table:

<table id="productsTable" align="center">

Then in the external JS file:

let table = document.getElementById('productsTable');

for (let i = 0; i < products.length; i++) {
    for (let key in products[i]) {
        table.innerHTML += "<tr>";
        table.innerHTML += "<td>" + key + "</td>";
        table.innerHTML += "<td>" + products[i][key] + "</td>";
        table.innerHTML += "<td><input value=\"Add to ShopBakset\" type=\"button\" onClick=\"addToBasket(" + formatProduct(products[i]) + ")\"/></td>";
        table.innerHTML += "</tr>";
    }
}

function formatProduct(product) {
   return JSON.stringify(product).replace(/\"/g, '\'')
}

In your addToBasket function, you can print the result to the console:

function addToBasket(value) { 
   console.log('json object', value);

   // ... your code
}

This will display the JSON object in the console.

https://i.stack.imgur.com/EWWNn.png

Answer 2

If you want to include JSON stringify in your HTML file, you can do it like this:

document.write('<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) +'\')"/></td>');

To parse the JSON in your JS code, add the following:

shopBasket.push(JSON.parse(value));

You can test the difference by running the code snippet and comparing the console output with and without JSON.stringify:

let products = [ 
    {20: "dysk ssd"}, 
    {1100: "pralka"}, 
    {219: "pad"}, 
    {500: "monitor"},
    {789: "i5 processor"},
    {88: "soundblaster"},
    {220: "mysz logitech"}, 
    {219: "klawiatura modecom"},
    {900: "gtx 1060"}, 
    {823: "rx 570"}
];

for (let i = 0; i < products.length; i++) {
   for (let key in products[i]) {
      console.log('Without using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + products[i] + '\')"/></td>');
      console.log('With using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) + '\')"/></td>');
   }

   // only showing the first element
   break;
}

If you parse the string again in your JavaScript function:

AddToBasket('{"20":"dysk ssd"}');

function AddToBasket(value) {
  let parsedBasket = JSON.parse(value);
  
  console.log(parsedBasket);
  
  // your code
}

Update: To resolve the unexpected token issue, move all the JavaScript code to an external file and add an ID to your table:

<table id="productsTable" align="center">

Then in the external JS file:

let table = document.getElementById('productsTable');

for (let i = 0; i < products.length; i++) {
    for (let key in products[i]) {
        table.innerHTML += "<tr>";
        table.innerHTML += "<td>" + key + "</td>";
        table.innerHTML += "<td>" + products[i][key] + "</td>";
        table.innerHTML += "<td><input value=\"Add to ShopBakset\" type=\"button\" onClick=\"addToBasket(" + formatProduct(products[i]) + ")\"/></td>";
        table.innerHTML += "</tr>";
    }
}

function formatProduct(product) {
   return JSON.stringify(product).replace(/\"/g, '\'')
}

In your addToBasket function, you can print the result to the console:

function addToBasket(value) { 
   console.log('json object', value);

   // ... your code
}

This will display the JSON object in the console.

https://i.stack.imgur.com/EWWNn.png

What is the significance of the term "Object object"?

Answer №1

Similar questions

Is e.preventDefault() failing to work in Next.js?

Combining several JSON objects into a single JSON object using JavaScript

Discovering a specific URL link element within the DOM using webdriver.io

Issue: Bidirectional binding functionality is not functioning properly within the user interface modal

Different time parameter for setting a timeout in Javascript

Stop the bubbling effect of :hover

What is the best way to display a chosen item in a text input field?

React-Native introduces a new container powered by VirtualizedList

site.js problem

Activate animation upon scrolling to specific element using Material-UI

The variable from AJAX is not being displayed in PHP

What are some effective ways to optimize a chat application and reduce the strain on the server?

What is the most effective approach for handling JSON data from URLs in a professional manner?

Can users be prevented from bookmarking a particular web page?

Verify if a fresh message has been added using AJAX

Assist me with Twitter

What is causing my Li elements to be unchecked in REACT?

Using the same ng-model to show distinct values in two separate input fields

Exploring the animation potential of HTML5 canvas and Javascript through utilizing putImageData with animated gifs

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?