如何在 JavaScript 中打印 object 數組？

Question

我在JavaScript中創建了一個object數組，如何在瀏覽器window中打印object數組，類似於PHP中的print_r function？

var lineChartData = [{
            date: new Date(2009, 10, 2),
            value: 5
        }, {
            date: new Date(2009, 10, 25),
            value: 30
        }, {
            date: new Date(2009, 10, 26),
            value: 72,
            customBullet: "images/redstar.png"
        }];

Answer 1

只需將您的對象stringify並將其分配給您選擇的元素的innerHTML 。

yourContainer.innerHTML = JSON.stringify(lineChartData);

如果你想要更漂亮的東西，做

yourContainer.innerHTML = JSON.stringify(lineChartData, null, 4);

 var lineChartData = [{ date: new Date(2009, 10, 2), value: 5 }, { date: new Date(2009, 10, 25), value: 30 }, { date: new Date(2009, 10, 26), value: 72, customBullet: "images/redstar.png" }]; document.getElementById("whereToPrint").innerHTML = JSON.stringify(lineChartData, null, 4);

 <pre id="whereToPrint"></pre>

但是，如果您只是為了調試而這樣做，那么您最好將控制台與console.log(lineChartData) 。

Answer 2

你檢查了嗎

console.table(yourArray);

更多信息在這里： https : //developer.mozilla.org/en-US/docs/Web/API/Console/table

Answer 3

如果您使用的是 Chrome，您還可以使用

console.log( yourArray );

Answer 4

在php.js庫中有一個很棒的 JavaScript 的print_r實現。

請注意，您還應該在代碼中添加echo支持。

演示： http : //jsbin.com/esexiw/1

Answer 5

提醒對象或數組內容的簡單函數。
使用數組或字符串或它提醒內容的對象調用此函數。

功能

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

用法

var data = [1, 2, 3, 4];
print_r(data);

Answer 6

document.getElementById('container').innerHTML = lineChartData[array_index]

Answer 7

我使用以下函數在 Firefox 控制台日志中顯示讀數：

////        make printable string for console readout, recursively
var make_printable_object = function(ar_use)
{
////        internal arguments
var in_tab = arguments[1];
var st_return = arguments[2];
////        default vales when applicable
if (!in_tab) in_tab = 0;
if (!st_return) st_return = "";
////        add depth
var st_tab = "";
for (var i=0; i < in_tab; i++) st_tab = st_tab+"-~-~-";

////        traverse given depth and build string
for (var key in ar_use)
{
    ////        gather return type
    var st_returnType = typeof ar_use[key];
    ////        get current depth display
    var st_returnPrime = st_tab+ "["+key+"] ->"+ar_use[key]+"< is {"+st_returnType+"}";
    ////        remove linefeeds to avoid printout confusion
    st_returnPrime = st_returnPrime.replace(/(\r\n|\n|\r)/gm,"");
    ////        add line feed
    st_return = st_return+st_returnPrime+"\n";
    ////         stop at a depth of 15
    if (in_tab>15) return st_return;
    ////        if current value is an object call this function
    if ( (typeof ar_use[key] == "object") & (ar_use[key] != "null") & (ar_use[key] != null) ) st_return = make_printable_object(ar_use[key], in_tab+1, st_return);


}

////        return complete output
return st_return;

};

例子：

console.log( make_printable_object( some_object ) );

或者，您可以替換：

st_return = st_return+st_returnPrime+"\n";

和

st_return = st_return+st_returnPrime+"<br/>";

在 html 頁面中打印出來。

Answer 8

您可以只使用以下語法，對象將完全顯示在控制台中：

console.log('object evt: %O', object);

我用的 Chrome 瀏覽器不知道這是否適用於其他瀏覽器。

Answer 9

嗯...為什么不使用這樣的東西？

 function displayArrayObjects(arrayObjects) { var len = arrayObjects.length, text = ""; for (var i = 0; i < len; i++) { var myObject = arrayObjects[i]; for (var x in myObject) { text += ( x + ": " + myObject[x] + " "); } text += "<br/>"; } document.getElementById("message").innerHTML = text; } var lineChartData = [{ date: new Date(2009, 10, 2), value: 5 }, { date: new Date(2009, 10, 25), value: 30 }, { date: new Date(2009, 10, 26), value: 72, customBullet: "images/redstar.png" }]; displayArrayObjects(lineChartData);

 <h4 id="message"></h4>

結果：

date: Mon Nov 02 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 5 
date: Wed Nov 25 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 30 
date: Thu Nov 26 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 72 customBullet: images/redstar.png 

提琴手

Answer 10

您可以使用console.log()打印對象

console.log(my_object_array);

如果您有大對象並想打印其某些值，則可以使用此自定義函數在控制台中打印數組

this.print = function (data,bpoint=0) {
    var c = 0;
    for(var k=0; k<data.length; k++){
        c++;
        console.log(c+'  '+data[k]);
        if(k!=0 && bpoint === k)break;  
    }
}

用法

print(array);   // to print entire obj array

要么

print(array,50);  // 50 value to print only 

Answer 11

問題是：如何在JavaScript中打印object數組？ 要打印一個使用這個。

document.write(array[i])

將打印一項，其中 i 是從 0 開始的數組計數。

document.write(array)

將打印所有這些。

Answer 12

雖然這並沒有專門針對類似於print_r的 JS function 來回答問題，但它不需要大量設置即可使其正常工作並以易於理解的格式顯示數據。

這個解決方案的靈感

 const result = document.getElementById('result'); const lineChartData = [ { date: "2009-10-2", value: 5 }, { date: "2009-10-25", value: 30 }, { date: "2009-10-26", value: 72 } ]; function funCall() { let html = `<table border='1|1' cellpadding='2' cellspacing='0'> <tr> <th>Date</th> <th>Value</th> </tr>`; setTimeout(() => { for (let i = 0; i < lineChartData.length; i++) { html += `<tr> <td>${lineChartData[i].date}</td> <td>${lineChartData[i].value}</td> </tr>`; } result.innerHTML = html; }, 500); } funCall();

 * { box-sizing: border-box; font-family: sans-serif; font-size: 0.9rem; } table { width: 150px; margin: 0 auto; } th { background: #654789; color: #fff; } tr:nth-of-type(odd) { background: #eee; } th, td { text-align: center; }

 <div id="result"></div>

Answer 13

不確定子元素，但現在所有瀏覽器都應該支持這個：

for (val of lineChartData) {
  document.write(val);
}

這可能會給你一些關於 JavaScript 中數組的 For-each 的想法？