Wie können Objektwerte mit innerHTML korrekt in ein DIV gedruckt werden?

Question

Ich mache einen Kurs bei Codecademy und viele ihrer Anfängerkurse verwenden den Befehl console.log(), um auf der Konsole zu drucken. Ich möchte jedoch versuchen, document.GetElementById () und innerHTML, aber es statt die Details des ausgewählten Objekts auszudrucken, es druckt nur "[Objekt Objekt]", während console.log() die Details druckt von dem Schlüssel?

Hier ist mein Code:

<div id="myfrndDetails"></div> 

<script> 
var frnds = new Object(); 
frnds.bill = { 
    firstName: "Bill", 
    lastName: "Gates", 
    phoneNumber: "8778787" 
} 

frnds.steve = { 
    firstName: "Bill", 
    lastName: "Gates", 
    phoneNumber: "8778787" 
} 


var frndCard = function(frndName,frndLst) { 
    for (var onefrnd in frndLst) { 
     if (frndLst[onefrnd].firstName === frndName) { 
      document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd]; 
      return frndLst[onefrnd]; 
     } 
    } 
}; 

frndCard("Bill",frnds); 

</script> 

Answer 1

aber statt die Details des ausgewählten Objekts auszudrucken, es nur druckt "[object Object]",

Dies ist weil frndLst [onefrnd] ein Objekt ist und seine toString Methode wird [object Object] drucken.

Entweder verwenden JSON.stringify(frndLst[onefrnd]) JSON Darstellung dieses Objekts

Oder, um zu sehen, ersetzen Sie diese Zeile

document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd]; 

von

document.getElementById("myfrndDetails").innerHTML = "lastname - " + frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ; 

Answer 2

Sie es als stringJSON.stringify wie unter Verwendung drucken können:

T sein würde das gesamte Objekt gedruckt wie:

document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]); 

Answer 3

Ihre Funktion wie folgt ändern

:

var frndCard = function(frndName,frndLst) { 
 
    for (var onefrnd in frndLst) { 
 
     
 
     if (frndLst[onefrnd].firstName === frndName) { 
 
      var output = ''; 
 
      for (property in frndLst[onefrnd]) { 
 
       output += property + ': ' + frndLst[onefrnd][property]+"; <br>\n"; 
 
       } 
 
      document.getElementById("myfrndDetails").innerHTML = output; 
 
      return frndLst[onefrnd]; 
 
     } 
 
    } 
 
};

Answer 4

Sie haben das Objekt in Zeichenfolge zu konvertieren. Siehe unten stehenden Code:

<div id="myfrndDetails"></div> 

<script> 
var frnds = new Object(); 
frnds.bill = { 
    firstName: "Bill", 
    lastName: "Gates", 
    phoneNumber: "8778787" 
} 

frnds.steve = { 
    firstName: "Bill", 
    lastName: "Gates", 
    phoneNumber: "8778787" 
} 


var frndCard = function(frndName,frndLst) { 
    for (var onefrnd in frndLst) { 
     if (frndLst[onefrnd].firstName === frndName) { 
      document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]); 

      console.log(frndLst[onefrnd]); 
      //will print Object { firstName="Bill", lastName="Gates", phoneNumber="8778787"} 

      //return frndLst[onefrnd]; 
      // this will return [object Object] 

      return JSON.stringify(frndLst[onefrnd]); 
      // will print {"firstName":"Bill","lastName":"Gates","phoneNumber":"8778787"} 
     } 
    } 
}; 

frndCard("Bill",frnds); 

</script> 

Answer 5

Es ist ein JSON-Array. So drucken Sie JSON-Array hav Sie JSON.stringify

document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]); 

zu verwenden oder wenn Sie Vorname ausdrucken möchten, Nachname und Telefonnummer separetly müssen Sie Wert von Schlüssel-Array-Index zu erhalten, wie unten.

document.getElementById("myfrndDetails").innerHTML = "lastname - " + frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ; 

Answer 6

Wenn Sie versuchen, frndLst[onefrnd]; Sie tatsächlich für die toString() Darstellung des Objekts Sie drucken gefragt sind anzuzeigen.

Sie einige Informationen hier auf die oben finden:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Persönlich würde ich vorschlagen Ihre eigene Funktion erstellen, die für einen hübschen Druck des Objekts in Ursache oder gehen Sie führt eine rudimentäre Zeichenfolgendarstellung des Objekts unter Verwendung der JSON-Funktionalität stringify.