Блог

Главная - Вопросы по программированию - Что означает объект object

Что означает объект object

#javascript

#javascript

Вопрос:

Я новичок в javascript, и у меня следующая проблема. Выходные данные, когда я вызываю alert в моем скрипте, являются [Object объект]. При нажатии кнопки вызывается следующая функция( onClick ). В массиве есть [Object object] элементы. И последняя строка кода не работает должным образом, я имею в виду, innerHtml .

 <!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: "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"
            }
          ];
          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>

С уважением

Комментарии:

1. предоставьте также HTML

2. innerHtml должно быть innerHTML

3. Не могли бы вы, пожалуйста, объяснить, что вы хотите сделать?

4. @Ckappo выглядит так, как будто он пытается показать размер массива на странице — точно внутри p тега с идентификатором «изменить».

5. @Adriani6 Итак, ваше исправление innerHTML должно быть решением 🙂

Ответ №1:

Я думаю, вам нужно выполнить JSON stringify в вашем HTML-файле следующим образом:

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

Затем в вашем JS-коде добавьте синтаксический анализ JSON, как показано ниже:

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

Запустите фрагмент кода, просто записывая в консоль с помощью 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>');
   }

   // just to write only the first element
   break;
}

И в вашей функции JavaScript, если вы снова проанализируете строку:

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

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

Обновление: Хорошо, итак, давайте переместим весь код JavaScript в ваш внешний файл и забудем о записи документа, сначала добавьте идентификатор в вашу таблицу:

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

Затем из внешнего JS-файла выполните следующее:

 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, ''')
}

Это решит вашу неожиданную проблему с токеном.

В вашей функции addToBasket вы можете записать в консоль результат:

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

   // ... your code
}

Который напечатает следующий объект JSON:

Объект JSON

Комментарии:

1. недопустимый или неожиданный токен в строке с тегом close </script>

2. Добавлен один пример для дальнейшего объяснения.

3. если бы я использовал неассоциативный массив, не было бы необходимости использовать stringify?

4. Если у вас в вашем массиве есть только строки, то нет необходимости использовать stringify. Пример: пусть products = [ «диск ssd», «пралка»];

5. Пожалуйста, рассмотрите возможность принятия в качестве ответа, если это решит вашу проблему, или дайте мне знать, если вам нужны дополнительные пояснения. Спасибо!