堆棧內存溢出
  簡體   English   中英

在html中打印javascript數組

[英]print javascript array in html

 原文  2015-08-05 10:26:24  2   6    javascript/ jquery/ arrays

問題描述

不確定如何將結果打印到 HTML 上。 我可以通過警報做到這一點。 如何在瀏覽器上打印？

<!DOCTYPE html>
<html>
<body>
    <script>
        var parsed = "";
        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];

        for (i = 0; i < myObject.length; i++) {
            var myobj = myObject[i];
            for (var property in myobj) {
                parsed += property + ": " + myobj[property] + "\n";
                alert(property);
                alert(myobj[property]);
            }
        }            
        alert(parsed);
    </script>
</body>
</html>

不確定如何將結果打印到 HTML 上。 我可以通過警報做到這一點。 如何在瀏覽器上打印？

6 個解決方案

解決方案1
 2  2015-08-05 10:34:24

      
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <textarea id="display" style="width:1000px;height:1000px"></textarea> <script> var parsed = ""; var myObject = [{ firstname: "Jane", lastname: "Doe", email: "jdoe@email.com" }, { firstname: "Ja", lastname: "joe", email: "je@email.com" }, { firstname: "Janet", lastname: "joes", email: "jsse@email.com" }]; for (i = 0; i< myObject.length; i++) { var myobj= myObject[i]; for (var property in myobj) { parsed += property + ": " + myobj[property] + "\\n"; } } $("#display").val(parsed); </script> </body> </html>

解決方案2
 1  2015-08-05 10:28:40

在您的 HTML 頁面中創建一個包含輸出的元素並為其分配適當的唯一 ID，例如“target-id”。

<html>
    <body>
         ...
         <div id="target-id"></div>
         ...
    </body>
</html>

然后使用下面的方法將所需的文本/HTML 插入該元素。

document.getElementById('target-id').innerHTML = 'html data';

另請參閱： 將 HTML 插入 div

解決方案3
 1  2015-08-05 10:32:48

使用特定的屬性 egclass,id,name 在 html 正文中創建一個元素，例如 div 或 label

HTML

<label id="arrayMessage"> </label>

Javascript

document.getElementById('arrayMessage').innerHTML = parsed ;

查詢

$("#arrayMessage").html(parsed);

您可以使用元素的其他屬性按類、名稱​​或 html 標簽類型獲取它們。

解決方案4
 1  2015-08-05 10:33:07

你可以使用簡單的：

document.write([1,2,3]);

但這不會太漂亮並且會覆蓋現有的頁面內容。

你可以這樣做：

...
<body>
  <div id="data"></div>
</body>

<script>
  var data = document.getElementById('data');
  myObject.forEach(function(element) {
     var firstname = document.create('div');
     var lastname = document.create('div');
     var email = document.create('div');

     firstname.innerHTML = element.firstname;
     lastname.innerHTML = element.lastname;
     email.innerHTML = element.email;

     data.appendChild(firstname);
     data.appendChild(lastname);
     data.appendChild(email);
  });
</script>
...

解決方案5
 1  2020-01-22 11:44:43

最簡單的解決方案是使用帶有縮進選項和標簽的 JSON.stringify()。 JSON.stringify(JSON,null,4) 4 個空格縮進。 

 let pre = document.getElementById('output'); let jstring = JSON.stringify({ a: 1, b:2,c:3 }, null, 4); pre.textContent = jstring;
 pre{ border:1px solid grey; min-height:10em;
 <pre id="output"></pre>

解決方案6
 0  2019-11-19 00:50:31

這是一個簡單的解決方案，我們使用 JSON.stringify() 將對象數組轉換為字符串。 希望它是你想做的。

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>

    <p id="elements"> </p>
    <script>

        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"`enter code here`
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];
        myObject.forEach(element => {
   document.getElementById("elements").innerHTML= JSON.stringify(myObject); 
});


        </script>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在javascript中打印對象數組，並在html標簽中打印 如何將 JSON 數組從 Javascript 打印到 HTML 來自txt的Javascript數組並將其打印在本地html上 JavaScript 打印 html 部分中 object 數組中的數組信息 如何在 HTML 上的 javascript 上從 Flask 打印數組元素 將JavaScript數組完整打印為HTML，方括號和引號 如何在jQuery .html（）函數中打印javascript數組值？ 遍歷數組並打印html foreach鍵/值的Javascript / jQuery 在javascript中打印html標簽 使用Javascript打印SVG HTML
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM