如何在<pre>元素中显示在console.log中显示的数组对象？

如何解决如何在<pre>元素中显示在console.log中显示的数组对象？

嗨，我想在<pre></pre>元素中显示名为allDomains的数组。我有一个console.log，但是如何在html预格式化块中获取它？我检查过-我的数组是一个对象。

我已经包含了console.log（allDomains）视图。

解决方法

您可以使用JSON.stringify()第三个参数来强制执行此操作。

<!DOCTYPE html>
<html>
  <body>
    <button id="triggerButton">Display domain objects</button>

    <pre id="placeholder"></pre>

    <script>
      function showArrayInHTML() {
        var domains = [
          'asdasd','bfbfbf','234234243','zxcxcxzc',];
        
        var result = domains.map(function(domain,index) {
          return index + ': ' +domain;
        });
        
        document.getElementById("placeholder").innerHTML = JSON.stringify(result,undefined,1);
      }
          
      document.getElementById('triggerButton').addEventListener('click',showArrayInHTML);
    </script>

  </body>
</html>

在您的html中添加<pre id="array_placeholder"></pre>。在您的JavaScript中，遍历数组并设置<pre>元素的innerHTML。例如：

document.getElementById('array_placeholder').innerHTML = formatArrayString(allDomains);

您可以将formatArrayString()定义为一个函数，该函数接受数组作为参数并将其格式化为要显示的字符串。

示例演示：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<pre id="demo"></pre>
<pre id="demo2"></pre>

<script>
function myFunction() {
  var fruits = ["Banana","Orange","Apple","Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = fruits.join('\n');
  
  var allDomains = {0: "first.com",2: "second.com",3: "third.com"};
  var y = document.getElementById("demo2");
  y.innerHTML = Object.entries(allDomains).map(o => o[1]).join('\n');
}
</script>

</body>
</html>