如何在JavaScript中打印对象数组?
我已经在JavaScript中创build了一个对象数组。 如何在浏览器窗口中打印对象数组,类似于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" }];
提前致谢。
简单的使用
yourContainer.innerHTML = JSON.stringify(lineChartData);
如果你想要更漂亮一点的话
yourContainer.innerHTML = JSON.stringify(lineChartData, null, 4);
示范
但是如果你只是为了debugging而这样做,那么你最好使用 console.log(lineChartData)
使用控制台 。
如果你使用Chrome,你也可以使用
console.log( yourArray );
你检查了吗
console.table(yourArray);
更多信息请访问: https : //developer.mozilla.org/en-US/docs/Web/API/Console/table
在php.js库中有一个非常棒的print_r
实现。
请注意,您还应该在代码中添加echo
支持。
演示: http : //jsbin.com/esexiw/1
简单的function来提醒对象或数组的内容。
用一个数组或string或者一个对象来调用这个函数来提醒内容。
function
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);
document.getElementById('container').innerHTML = lineChartData[array_index]
我使用下面的函数在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页面。
您可以使用以下语法,并且该对象将完全显示在控制台中:
console.log('object evt: %O', object);
我使用Chrome浏览器不知道这是否适用于其他浏览器。
呃…为什么不使用这样的东西呢?
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>
我用我的自定义函数在控制台中打印数组
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);
或打印(数组,50); //只能打印50值