How to print object array in JavaScript?

小开

最佳答案

Simply stringify your object and assign it to the innerHTML of an element of your choice.

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

小开

There is a wonderful print_r implementation for JavaScript in php.js library.

Note, you should also add echo support in the code.

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

小开

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

小开

If you are using Chrome, you could also use

console.log( yourArray );

小开

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

小开

I use the below function to display a readout in firefox console log:

////        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.

小开

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.

小开

Did you check

console.table(yourArray);

More infos here: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

小开

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

jsfiddle

小开

you can use console.log() to print object

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

小开

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?

小开

The question is: How to print object array in JavaScript? To print one use this.

document.write(array[i])

Will print one item where i is the array count starting at 0.

document.write(array)

Will print all of them.