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

Activate on-demand static regeneration with Next.js

Retrieving JSON data to create and showcase an HTML table

"Is it possible to access variables declared in the main app.js file from separate route files in Node.js Express 2.5.5 and if so

Step-by-step guide on triggering a button using another button

Manipulating an element in the JSON data is causing alterations to the preceding elements

Learn how to efficiently pass multiple props using a loop in Vue

Sending an array of JSON objects using jQuery is a simple and straightforward process. By

Struggling to deal with conditionals in Express

Leveraging two AJAX requests within a single function

Implement a click event using jQuery specifically for Internet Explorer version 7

Checking the response from an AJAX call with an if/else statement

A guide on how to implement promise return in redux actions for react native applications

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

Using Nuxt.js to import custom NPM packages on a global scale

Is there a glitch in the Selenium Java CSS Selector functionality?

When the progress bar is clicked, the background color changes and then changes back again

Detecting single letters in a sentence and changing their appearance using CSS

Stop options from being hidden in a select dropdown using HTML

Sort through the array using a separate array in Vuejs

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate