He creado un array de objetos en JavaScript. ¿Cómo puedo imprimir la matriz de objetos en la ventana del navegador, similar a print_r función en 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"
        }];
  • Uso console.log(lineChartData) para iniciar sesión en la consola.
  • Usted puede utilizar console.debug(lineChartData) para ver el objeto en la consola. (En firefox: Herramientas->Desarrollador Web->Web de la Consola (o Ctrl+Mayús+K) – O descargar Firefox
InformationsquelleAutor uvinod | 2013-02-15

11 Comentarios

  1. 108

    Simplemente stringify su objeto y asignar a la innerHTML de un elemento de su elección.

    yourContainer.innerHTML = JSON.stringify(lineChartData);

    Si quieres algo más bonito, ¿

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

    JS:

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

    HTML:

    <pre id="whereToPrint"></pre>

    Pero si usted acaba de hacer esto con el fin de depurar, entonces es mejor que el uso de la consola con console.log(lineChartData).

  2. 7

    Hay una maravillosa print_r implementación de JavaScript en php.js biblioteca.

    Nota, también debe agregar echo apoyo en el código.

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

    • en serio, el console es un mejor lugar para la información de depuración de la ventana principal del navegador.
    • de acuerdo.
    • Bueno tengo que admitir que esto es cierto, a veces haces una petición http que devuelve más de 100 o más objetos y no tiene sentido que haga clic en la flecha y abierto a todos para ver lo que hay dentro de la matriz de objetos
  3. 3

    Simple función de alerta de contenido de un objeto o de una matriz .

    Llamar a esta función con una matriz o una cadena o un objeto que se alertas de los contenidos.

    Función

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

    Uso

    var data = [1, 2, 3, 4];
    print_r(data);
  4. 0

    Puedo utilizar la siguiente función para mostrar una lectura en firefox de registro de la consola:

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

    Ejemplo:

    console.log( make_printable_object( some_object ) );

    Alternativamente, se puede sustituir:

    st_return = st_return+st_returnPrime+"\n";

    con

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

    a imprimir en una página html.

  5. 0

    Que sólo puede utilizar la siguiente sintaxis y el objeto será plenamente demostrado en la consola:

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

    Yo uso el navegador Chrome, no sé si esto es adaptable para otros navegadores.

  6. 0

    Emm… ¿por Qué no usar algo como esto?

    JS:

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

    HTML:

    <h4 id="message"></h4>

    resultado:

    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

  7. 0

    puedo usar mi función personalizada para imprimir la matriz en la consola de

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

    de uso : imprimir(matriz);

    o
    de impresión(matriz,50); //valor de 50 para imprimir sólo

  8. -1

    No está seguro acerca de los elementos, pero todos los navegadores deberían apoyar esta ahora:

    for (val of lineChartData) {
      document.write(val);
    }

    Esto podría dar algunas ideas de Para cada uno de más de un array en JavaScript?

    • Recomendar document.write sin ningún tipo de contexto es una muy mala idea, ya que es la escritura para el stream, que iba a destruir un cerrado documento (totalmente cargado la página). El for ... of bucle es una buena idea, aunque. Por favor, dar más contexto o cambiar el document.write.
    • Eres libre para ampliar y hacer modificaciones. Los matices de la progresiva representación y manipulación del árbol DOM, hay grandes videos de eso en YouTube, pero que está fuera del tema. Me parece documento.escribir es a menudo más rápido y más conveniente que el de la consola.registro de pruebas rápidas, y utiliza menos espacio en la pantalla, pero todo depende de lo que estás haciendo y, por supuesto, sus preferencias personales.

Dejar respuesta

Please enter your comment!
Please enter your name here