[英]How to print object array in JavaScript?
I have created an object array in JavaScript. How can I print the object array in the browser window, similar to print_r
function in PHP?我在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"
}];
Simply stringify
your object and assign it to the innerHTML of an element of your choice.只需将您的对象stringify
并将其分配给您选择的元素的innerHTML 。
yourContainer.innerHTML = JSON.stringify(lineChartData);
If you want something prettier, do如果你想要更漂亮的东西,做
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>
But if you just do this in order to debug, then you'd better use the console with console.log(lineChartData)
.但是,如果您只是为了调试而这样做,那么您最好将控制台与console.log(lineChartData)
。
Did you check你检查了吗
console.table(yourArray);
More infos here: https://developer.mozilla.org/en-US/docs/Web/API/Console/table更多信息在这里: https : //developer.mozilla.org/en-US/docs/Web/API/Console/table
如果您使用的是 Chrome,您还可以使用
console.log( yourArray );
There is a wonderful print_r
implementation for JavaScript in php.js library.在php.js库中有一个很棒的 JavaScript 的print_r
实现。
Note, you should also add echo
support in the code.请注意,您还应该在代码中添加echo
支持。
DEMO: http://jsbin.com/esexiw/1演示: http : //jsbin.com/esexiw/1
Simple function to alert contents of an object or an array .提醒对象或数组内容的简单函数。
Call this function with an array or string or an object it alerts the contents.使用数组或字符串或它提醒内容的对象调用此函数。
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);
}
}
Usage用法
var data = [1, 2, 3, 4];
print_r(data);
document.getElementById('container').innerHTML = lineChartData[array_index]
I use the below function to display a readout in firefox console log:我使用以下函数在 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;
};
Example:例子:
console.log( make_printable_object( some_object ) );
Alternatively , you can just replace:或者,您可以替换:
st_return = st_return+st_returnPrime+"\n";
with和
st_return = st_return+st_returnPrime+"<br/>";
to print out in a html page.在 html 页面中打印出来。
You can just use the following syntax and the object will be fully shown in the console:您可以只使用以下语法,对象将完全显示在控制台中:
console.log('object evt: %O', object);
I use Chrome browser don't know if this is adaptable for other browsers.我用的 Chrome 浏览器不知道这是否适用于其他浏览器。
Emm... Why not to use something like this?嗯...为什么不使用这样的东西?
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>
result:结果:
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
you can use console.log()
to print object您可以使用console.log()
打印对象
console.log(my_object_array);
in case you have big object and want to print some of its values then you can use this custom function to print array in console如果您有大对象并想打印其某些值,则可以使用此自定义函数在控制台中打印数组
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;
}
}
usage用法
print(array); // to print entire obj array
or要么
print(array,50); // 50 value to print only
The question is: How to print object array in JavaScript?问题是:如何在JavaScript中打印object数组? To print one use this.要打印一个使用这个。
document.write(array[i])
Will print one item where i is the array count starting at 0.将打印一项,其中 i 是从 0 开始的数组计数。
document.write(array)
Will print all of them.将打印所有这些。
While this doesn't answer the question specifically in terms of a JS function similar to print_r
, it doesn't require a lot of setup to get it working and displaying data in an easy-on-the-eyes format.虽然这并没有专门针对类似于print_r
的 JS function 来回答问题,但它不需要大量设置即可使其正常工作并以易于理解的格式显示数据。
The inspiration for this solution这个解决方案的灵感
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>
Not sure about the subelements, but all browsers should support this now:不确定子元素,但现在所有浏览器都应该支持这个:
for (val of lineChartData) {
document.write(val);
}
This might give you some ideas For-each over an array in JavaScript?这可能会给你一些关于 JavaScript 中数组的 For-each 的想法?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.