wake-up-neo.net

Wie drucke ich ein Objektarray in JavaScript?

Ich habe ein Objekt-Array in JavaScript erstellt. Wie kann ich das Objektarray im Browserfenster drucken, ähnlich der print_r-Funktion in PHP

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

Einfach stringify Ihr Objekt und weisen Sie es dem innerHTML eines Elements Ihrer Wahl zu.

yourContainer.innerHTML = JSON.stringify(lineChartData);

Wenn Sie etwas Schöneres wollen, tun Sie es

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>

Wenn Sie dies jedoch nur zum Debuggen tun, sollten Sie die Konsole mit console.log(lineChartData) verwenden.

103
Denys Séguret

Wenn Sie Chrome verwenden, können Sie auch verwenden

console.log( yourArray );
12
Toto-Graph

Hast du überprüft

console.table(yourArray);

Weitere Infos hier: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

11
charlesdg

In der Bibliothek php.js gibt es eine wunderbare Implementierung von print_r für JavaScript.

Beachten Sie, dass Sie im Code auch echo support hinzufügen sollten.

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

7
VisioN

Einfache Funktion zum Warnen von Inhalten eines Objekts oder eines Arrays.
Rufen Sie diese Funktion mit einem Array oder einer Zeichenfolge oder einem Objekt auf, um den Inhalt zu warnen.

Funktion

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

Verwendungszweck

var data = [1, 2, 3, 4];
print_r(data);
3
Rayiez
document.getElementById('container').innerHTML = lineChartData[array_index]
1
bhupesh

Emm ... Warum nicht so etwas verwenden?

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>

Ergebnis:

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

0
Gennady G

Ich verwende die folgende Funktion, um eine Anzeige im Protokoll der Firefox-Konsole anzuzeigen:

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

};

Beispiel: 

console.log( make_printable_object( some_object ) );

Alternativ können Sie einfach ersetzen:

st_return = st_return+st_returnPrime+"\n";

mit 

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

in einer HTML-Seite ausdrucken.

0
Shawn

Sie können einfach die folgende Syntax verwenden und das Objekt wird vollständig in der Konsole angezeigt:

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

Ich benutze den Chrome-Browser. Ich weiß nicht, ob dies für andere Browser geeignet ist.

0
Torsten Barthel

ich benutze meine benutzerdefinierte Funktion, um das Array in der Konsole zu drucken 

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

verwendung: Print (Array);
oder print (Array, 50); // 50 Wert nur zum Drucken 

0
user889030