Jak wyświetlić zawartość obiektu JavaScript w formacie ciągu znaków, np. Gdy jesteśmy alertzmienną?

W ten sam sformatowany sposób chcę wyświetlić obiekt.

Jeśli chcesz wydrukować obiekt w celu debugowania, użyj kodu:

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

wyświetli się:

Uwaga: musisz tylko zalogować obiekt. Na przykład to nie zadziała:

console.log('My object : ' + obj)

Uwaga : w logmetodzie można również użyć przecinka , wówczas pierwszym wierszem danych wyjściowych będzie ciąg znaków, a następnie obiekt zostanie zrenderowany:

console.log('My object: ', obj);

Użyj JSON.stringifymetody natywnej . Działa z zagnieżdżonymi obiektami i wszystkie główne przeglądarki obsługują tę metodę.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

Link do strony Mozilla API Reference i innych przykładów.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

Użyj niestandardowego zamiennika JSON.stringify, jeśli napotkasz ten błąd Javascript

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

console.dir(object):

Wyświetla interaktywną listę właściwości określonego obiektu JavaScript. Ta lista pozwala używać trójkątów ujawnienia do badania zawartości obiektów potomnych.

Pamiętaj, że ta console.dir()funkcja jest niestandardowa. Zobacz MDN Web Docs

Spróbuj tego :

console.log(JSON.stringify(obj))

Spowoduje to wydrukowanie wersji obiektu stringify. Zamiast tego [object]jako wynik otrzymasz zawartość obiektu.

Cóż, Firefox (dzięki @Bojangles za szczegółowe informacje) ma Object.toSource()metodę, która drukuje obiekty jako JSON i function(){}.

To chyba wystarcza do większości celów debugowania.

Jeśli chcesz użyć alertu, aby wydrukować obiekt, możesz to zrobić:

alert("myObject is " + myObject.toSource());

Powinien wydrukować każdą właściwość i odpowiadającą jej wartość w formacie ciągu.

Jeśli chcesz zobaczyć dane w formacie tabelarycznym, możesz użyć

console.table(obj);

Tabelę można posortować, klikając kolumnę tabeli.

Możesz także wybrać kolumny do wyświetlenia:

console.table(obj, ['firstName', 'lastName']);

Więcej informacji na temat console.table można znaleźć tutaj

W NodeJS możesz wydrukować obiekt za pomocą util.inspect(obj). Podaj głębokość, w przeciwnym razie będziesz miał tylko płytki wydruk.

Funkcjonować:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

Stosowanie:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

Przykład:

http://jsfiddle.net/WilsonPage/6eqMn/

Po prostu użyj

JSON.stringify(obj)

Przykład

var args_string = JSON.stringify(obj);
console.log(args_string);

Lub

alert(args_string);

Uwaga: funkcje w javascript są uważane za obiekty.

Jako dodatkowa uwaga:

W rzeczywistości możesz przypisać nową właściwość taką jak ta i uzyskać do niej dostęp do pliku console.log lub wyświetlić ją w trybie alertu

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

Użyj tego:

console.log('print object: ' + JSON.stringify(session));

Jak powiedziano wcześniej, najlepszym i najprostszym sposobem, jaki znalazłem, było

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

Aby wydrukować pełny obiekt za pomocą Node.js z kolorami jako bonus:

console.dir(object, {depth: null, colors: true})

Kolory są oczywiście opcjonalne, „depth: null” wydrukuje pełny obiekt.

Opcje nie wydają się być obsługiwane w przeglądarkach.

Bibliografia:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

Uwaga: W tych przykładach yourObj definiuje obiekt, który chcesz zbadać.

Po pierwsze mój najmniej ulubiony, ale najczęściej wykorzystywany sposób wyświetlania obiektu:

Jest to defaktyczny sposób wyświetlania zawartości obiektu

console.log(yourObj)

wyprodukuje coś takiego:

Myślę, że najlepszym rozwiązaniem jest przejrzenie kluczy obiektów, a następnie wartości obiektów, jeśli naprawdę chcesz zobaczyć, co zawiera obiekt ...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

Wyprowadzi coś takiego: (na zdjęciu powyżej: klucze / wartości przechowywane w obiekcie)

Istnieje również ta nowa opcja, jeśli używasz ECMAScript 2016 lub nowszej wersji:

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

Spowoduje to uporządkowane wyjście: Rozwiązanie wspomniane w poprzedniej odpowiedzi: console.log(yourObj)wyświetla zbyt wiele parametrów i nie jest najbardziej przyjaznym dla użytkownika sposobem wyświetlania pożądanych danych . Dlatego polecam rejestrowanie kluczy, a następnie wartości osobno.

Dalej:

console.table(yourObj)

Ktoś z wcześniejszego komentarza zasugerował ten, jednak dla mnie to nigdy nie zadziałało. Jeśli to działa na kogoś innego w innej przeglądarce lub coś w tym stylu, wtedy kudos! Nadal umieszczam kod tutaj w celach informacyjnych! Wyśle coś takiego do konsoli:

(Zostało to dodane do mojej biblioteki na GitHub )

Odkryj na nowo koło tutaj! Żadne z tych rozwiązań nie działało w mojej sytuacji. Szybko więc udokumentowałem odpowiedź wilsonpage'a . Ten nie jest przeznaczony do drukowania na ekranie (przez konsolę, pole tekstowe lub cokolwiek innego). To działa dobrze w takich sytuacjach i działa dobrze, zgodnie z wnioskiem PO alert. Wiele odpowiedzi tutaj nie dotyczy użycia alertzgodnie z żądaniem PO. W każdym razie jest on jednak sformatowany do przesyłania danych. Ta wersja wydaje się zwracać bardzo podobny wynik jak toSource(). Nie testowałem przeciwko JSON.stringify, ale zakładam, że chodzi o to samo. Ta wersja jest bardziej jak poly-fil, dzięki czemu można go używać w dowolnym środowisku. Wynikiem tej funkcji jest poprawna deklaracja obiektu JavaScript.

Nie wątpiłbym, że coś takiego już gdzieś jest na SO, ale było to tylko krótsze, aby to zrobić, niż spędzić chwilę na szukaniu poprzednich odpowiedzi. A ponieważ to pytanie było moim największym hitem w Google, kiedy zacząłem o tym szukać; Pomyślałem, że umieszczenie go tutaj może pomóc innym.

W każdym razie wynikiem tej funkcji będzie ciąg znaków reprezentujący obiekt, nawet jeśli obiekt ma obiekty osadzone i tablice, a nawet jeśli te obiekty lub tablice mają jeszcze inne obiekty osadzone i tablice. (Słyszałem, że lubisz pić? A więc wypompowałem twój samochód chłodnicą. A potem wypchnąłem twoją lodówkę chłodnicą. Więc twoja chłodnica może pić, kiedy jesteś cool.)

Tablice są przechowywane []zamiast, {}a zatem nie mają par klucz / wartość, tylko wartości. Jak zwykłe tablice. Dlatego są tworzone tak jak tablice.

Również wszystkie ciągi (w tym nazwy kluczy) są cytowane, nie jest to konieczne, chyba że ciągi te zawierają znaki specjalne (takie jak spacja lub ukośnik). Ale nie chciałem tego wykrywać, aby usunąć niektóre cytaty, które w przeciwnym razie nadal działałyby dobrze.

Ten wynikowy ciąg może być następnie użyty z evallub po prostu zrzucony do manipulacji ciągiem var varru. W ten sposób ponownie utworzysz obiekt z tekstu.

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Daj mi znać, jeśli wszystko zepsułem, działa dobrze w moich testach. Jedynym sposobem, w jaki mogłem wymyślić typ, arraybyło sprawdzenie jego obecności length. Ponieważ JavaScript naprawdę przechowuje tablice jako obiekty, nie mogę sprawdzić typu array(nie ma takiego typu!). Jeśli ktoś inny zna lepszy sposób, chciałbym to usłyszeć. Ponieważ jeśli twój obiekt ma również właściwość o nazwie, lengthfunkcja ta omyłkowo potraktuje ją jako tablicę.

EDYCJA: Dodano sprawdzanie obiektów o wartości zerowej. Dzięki, Brock Adams

EDYCJA: Poniżej znajduje się stała funkcja umożliwiająca drukowanie nieskończenie rekurencyjnych obiektów. To nie jest drukowane tak samo jak toSourcez FF, ponieważ toSourcewydrukuje nieskończoną rekurencję jeden raz, gdzie jak, ta funkcja natychmiast ją zabije. Ta funkcja działa wolniej niż powyższa, więc dodaję ją tutaj zamiast edytować powyższą funkcję, ponieważ jest ona potrzebna tylko wtedy, gdy planujesz gdzieś przekazać obiekty, które łączą się z sobą.

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Test:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

Wynik:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

UWAGA: Próba wydrukowania document.bodyjest okropnym przykładem. Po pierwsze, FF po prostu drukuje pusty ciąg znaków obiektu podczas używania toSource. Podczas korzystania z powyższej funkcji FF ulega awarii SecurityError: The operation is insecure.. Chrome się zawiesi Uncaught RangeError: Maximum call stack size exceeded. Oczywiście document.bodynie miał być konwertowany na ciąg znaków. Ponieważ jest albo za duży, albo przeciwko polityce bezpieczeństwa, aby uzyskać dostęp do niektórych właściwości. Chyba, że ​​coś tu pomieszałem, powiedz!

Jeśli chcesz wydrukować obiekt na całej długości, możesz użyć

console.log (wymagają ('util'). inspect (obj, {showHidden: false, depth: null})

Jeśli chcesz wydrukować obiekt, konwertując go na ciąg, to

console.log (JSON.stringify (obj));

Oto sposób, aby to zrobić:

console.log("%o", obj);

Potrzebowałem sposobu na rekurencyjne wydrukowanie obiektu, co dostarczyła odpowiedź pagewil (Dzięki!). Zaktualizowałem go trochę, aby zawierał sposób drukowania do pewnego poziomu i dodawał odstępy, aby był odpowiednio wcięty na podstawie obecnego poziomu, na którym się znajdujemy, aby był bardziej czytelny.

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "undefined" ) {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 ) {
        str = '<pre>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

    if ( maxLevel != 0 && level >= maxLevel ) {
        str += levelStr + '...</br>';
        return str;
    }

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 ) {
        str += '</pre>';
    }
    return str;
};

Stosowanie:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) ); 

Zawsze używam console.log("object will be: ", obj, obj1). w ten sposób nie muszę wykonywać obejścia za pomocą stringify w JSON. Wszystkie właściwości obiektu zostaną ładnie rozszerzone.

Innym sposobem wyświetlania obiektów w konsoli jest JSON.stringify. Sprawdź poniższy przykład:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));

Funkcja Javascript

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

Obiekt drukowania

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

przez print_r w JavaScript

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

gdzie objectjest twój przedmiot

lub możesz użyć tego w narzędziach Chrome dla programistów, zakładka „konsola”:

console.log(object);

Załóż obiekt obj = {0:'John', 1:'Foo', 2:'Bar'}

Wydrukuj zawartość obiektu

for (var i in obj){
    console.log(obj[i], i);
}

Dane wyjściowe konsoli (Chrome DevTools):

John 0
Foo 1
Bar 2

Mam nadzieję, że to pomaga!

Wolę używać console.tabledo uzyskania jasnego formatu obiektu, więc wyobraź sobie, że masz ten obiekt:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

A poniżej zobaczysz schludny i czytelny stół:

Mała funkcja pomocnicza, której zawsze używam w swoich projektach do prostego i szybkiego debugowania za pomocą konsoli. Inspiracja zaczerpnięta z Laravela.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

Stosowanie

dd(123.55); wyjścia:

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

Możesz także użyć koncepcji literału szablonu ES6, aby wyświetlić zawartość obiektu JavaScript w formacie ciągu.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

użyłem metody drukowania pagewil i działało to bardzo ładnie.

oto moja nieco rozszerzona wersja z (niechlujnymi) wcięciami i wyraźnymi ogranicznikami prop / ob:

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};

Kolejna modyfikacja kodu pagewils ... jego nie drukuje niczego poza ciągami znaków i pozostawia puste pola liczbowe i boolowskie, a ja poprawiłem literówkę na drugim typie bezpośrednio w funkcji utworzonej przez megaboss.

var print = function( o, maxLevel, level )
{
    if ( typeof level == "undefined" )
    {
        level = 0;
    }
    if ( typeof maxlevel == "undefined" )
    {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 )
    {
        str = '<pre>';   // can also be <pre>
    }

    var levelStr = '<br>';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with <pre>
    }

    if ( maxLevel != 0 && level >= maxLevel )
    {
        str += levelStr + '...<br>';
        return str;
    }

    for ( var p in o )
    {
        switch(typeof o[p])
        {
          case 'string':
          case 'number':    // .tostring() gets automatically applied
          case 'boolean':   // ditto
            str += levelStr + p + ': ' + o[p] + ' <br>';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
            break;
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 )
    {
        str += '</pre>';   // also can be </pre>
    }
    return str;
};

Oto funkcja.

function printObj(obj) {
console.log((function traverse(tab, obj) {
    let str = "";
    if(typeof obj !== 'object') {
        return obj + ',';
    }
    if(Array.isArray(obj)) {            
        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
    }
    str = str + '{\n';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

Może pokazywać obiekt za pomocą wcięcia tabulatora z czytelnością.