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

Answer 1

只需使用

yourContainer.innerHTML = JSON.stringify(lineChartData); 

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

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

Demonstration

但如果你只是这样做是为了调试，那么你更好的use the console与console.log(lineChartData)。

Answer 2

有一个很棒的print_r执行JavaScript的php.js库。

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

DEMO：http://jsbin.com/esexiw/1

Answer 3

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

Answer 4

如果您使用的是Chrome，你也可以使用

console.log(yourArray); 

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

我用下面的函数来显示在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; 

}; 

Examp乐：

console.log(make_printable_object(some_object)); 

或者，只需更换：

st_return = st_return+st_returnPrime+"\n"; 

与

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

在html页面打印出来。

Answer 7

你可以使用下面的语法和对象将在控制台中尽显：

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

我使用Chrome浏览器不知道这是否是适应于其他浏览器。

Answer 8

你检查

console.table(yourArray); 

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

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 

jsfiddle

Answer 10

我用我的自定义功能在控制台打印阵列

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）;
或 print（array，50）; // 50值仅打印