如何在JavaScript中打印对象数组？

Question

我已经在JavaScript中创建了一个对象数组。如何在浏览器窗口中打印对象数组，类似于PHP中的print_r函数？

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

- Vinod Kumar

---

使用 console.log(lineChartData) 将其记录到控制台。 - Rob

您可以使用console.debug(lineChartData)在控制台中查看对象。(在Firefox中: 工具->Web开发者->Web控制台(或Ctrl+Shift+K) - 或下载Firebug) - Adam Tomat

Answer 1

只需将您的对象字符串化并将其分配给您选择的元素的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)的控制台。

- Denys Séguret

---

如果我在Bash中这样做，有没有一种方法可以在控制台上进行漂亮的打印输出？ - giorgio79

@denys-séguret 我所做的是： prevElement = document.createElement("prev"); 然后将其附加到HTML body中，innerHtml设置为上述字符串。 尽管我可以看到prev元素已成功创建，但JSON仍未按照我想要的方式进行漂亮的打印。你能帮我理解为什么吗？ - Dreamer

Answer 2

你有检查过吗？

console.table(yourArray);

更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/API/Console/table

- charlesdg

---

这太棒了，超出了我的预期。 - Jay Yang

Answer 3

如果您正在使用Chrome浏览器，您也可以使用

console.log( yourArray );

- Toto-Graph

---

我需要在一个较大的字符串中使用格式化数组：这似乎对此无法正常工作..？ - WestCoastProjects

Answer 4

在php.js库中，有一个非常好的print_r实现适用于JavaScript。

请注意，在代码中还应添加对echo的支持。

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

- VisioN

---

控制台比主浏览器窗口更适合调试信息。 - SDC

@SDC 嗯，我承认这是真的。有时候你会发出一个HTTP请求，返回100个或更多的对象，点击箭头并打开它们来查看对象数组中的内容就没有意义了。 - DrewT

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);

- Rayiez

Answer 6

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

- bhupesh

Answer 7

您可以使用 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 

- user889030

---

这段代码弹出了“打印到实际纸张”的对话框窗口。不知道这是否是预期的结果 - 但当我在Brave上运行它时，就是这样发生的。 - Radu Bartan

Answer 8

嗯...为什么不使用类似这样的东西呢？

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 

jsfiddle

- Gennady G

Answer 9

问题是：如何在JavaScript中打印对象数组？ 要打印一个，请使用以下代码。

document.write(array[i])

将打印一个项目，其中i是从0开始的数组计数。

document.write(array)

将会打印它们所有。

- ACKmiecik

Answer 10

我使用以下函数在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页面中打印输出。

- Shawn