object Object issue Javascript

Question

I'm wokring with some assignements i got in school and I'm very new to coding. My goal is to present name FirstName & LastName of all all these variables in a span with an onclick. But the issue is that the loop seems to return [object Object] instead of the actual values of each new Person. It currently looks like this:

(I'm only to use pure Javascript without any help of Jquery or the use of Json with this code)

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}


    var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
    var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
    var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
    var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
    var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



    var Persons = [p1, p2, p3, p4, p5];
    for (var i = 0; i < Persons.length; i++) {
        var personList = document.getElementById("personLista")
        personList.textContent += Persons [i] + ", ";
    }

Edit (HTML): <span id="resultText1"></span> <span id="resultText2"></span> <button id="Knapp1" onclick="start()">Klicka här</button> <input type="text" id="textRuta1"/> <input type="text" id="textRuta2"/> <span id="arraySpan"></span> <span id="personLista"></span> — Anton Andersson
– Anton Andersson, Commented Oct 6, 2017 at 19:58
@DanielD To the editor of your post: please write meaningful edit summary. Just "added html" is completely useless for reviewers of suggested edits. I can see you add html without this comment. If you're importing it from the OP's comment - then say so, so that we know. We don't see comments during review (check for yourself: stackoverflow.com/review/suggested-edits/17552345) so your edit alone is to be rejected. — Al.G.
– Al.G., Commented Oct 6, 2017 at 20:18
@DanielD Also, never add more code to a question that wasn't already there. You wind up making assumptions about that code that could be completely wrong. — Scott Marcus
– Scott Marcus, Commented Oct 6, 2017 at 20:20

Scott Marcus · Accepted Answer · 2017-10-06 22:53:28Z

[object Object] is just the string representation of the entire object which is what you get since you are concatenating it with this string: ", ".

If you want to see the data within the object, you'll need to access a property of the object explicitly:

// JS convention is to use PascalCase for constructor functions
// as you are correctly doing here:
function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");

// But, JS convention is to use camelCase for all variables
var persons = [p1, p2, p3, p4, p5];

// Get this reference once, outside of the loop instead of each
// time you iterate over the array
var personList = document.getElementById("personLista");

for (var i = 0; i < persons.length; i++) {
  // You need to access some aspect of the object (FirstName 
  // and LastName in this example) not the entire object itself:
  personList.innerHTML += "<li>" + persons[i].FirstName + " " + persons[i].LastName + "</li>";
}

<ul id="personLista"></ul>

You may not have gotten to this in your assignments yet, but in ECMAScript 6 (introduced in 2015 and supported by most modern browsers today), arrays have a .forEach() method that makes it easier to iterate over their contents. Here's an example that first loops over the array, but then enumerates the properties of each object that is in the array:

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");

var persons = [p1, p2, p3, p4, p5];

// Get this reference once, outside of the loop instead of each
// time you iterate over the array
var personList = document.getElementById("personLista");

// Loop over the array of people
persons.forEach(function(per){

  // Beginning of a string of HTML that will be outputted at the end:
  var personString = "<li>" 

  // Now enumerate all the properties of the person
  for(var prop in per){
    personString += per[prop] + ", ";
  }
  personString += "</li>"
  personList.innerHTML += personString;
});

<ul id="personLista"></ul>

Scott Marcus · Accepted Answer · 2017-10-06 20:17:28Z

0

In Order to display values from object you need to access the properties from this object.

I have made an example on how to display values from the object.

function Person(firstName, lastName, adress, phone) {
  this.FirstName = firstName;
  this.LastName = lastName;
  this.Adress = adress;
  this.Phone = phone;
}

Person.prototype.toString = function() {
  return this.FirstName + " " + this.LastName;
}


var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



var Persons = [p1, p2, p3, p4, p5];
for (var i = 0; i < Persons.length; i++) {
  var personList = document.getElementById("personLista")
  personList.textContent += Persons[i].toString() + ", ";
}

<span id="resultText1"></span> 
<span id="resultText2"></span> 
<input type="text" id="textRuta1"/> <input type="text" id="textRuta2"/> 
<span id="arraySpan"></span> 
<span id="personLista"></span>

edited Oct 6, 2017 at 20:17

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

answered Oct 6, 2017 at 20:04

Kukic Vladimir

1,0064 gold badges15 silver badges23 bronze badges

2 Comments

Scott Marcus Over a year ago

A "fiddle" is a code snippet you make at jsfiddle.net. Here, it's just a code snippet.

Kukic Vladimir Over a year ago

@ScottMarcus, true... first i made a fiddle and then realized that I can make a snippet here, will edit the answer

MKR · Accepted Answer · 2017-10-06 20:25:26Z

You could overwrite toStirng() for Person object. The implementation could be:

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

Person.prototype.toString = function personToString() {
  var stringVal = 'FirstName: ' + this.FirstName + ' LastName: ' + this.LastName + ' Adress: ' + this.Adress + ' Phone: ' + this.Phone;
  return stringVal;
}

    var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
    var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
    var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
    var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
    var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



    var Persons = [p1, p2, p3, p4, p5];
    for (var i = 0; i < Persons.length; i++) {
        var personList = document.getElementById("personLista")
        personList.textContent += Persons[i].toString() + ", ";
    }

You can modify function personToString() to format details as per your choice.

Kai · Accepted Answer · 2017-10-06 21:36:35Z

0

So many answers! Let me try one..

A) First, you can also use class nowadays, which is syntactic sugar for your Person.

B) just make an easy method you call when writing the full name. it is more clear and easier.

C) the reason why you saw [Object object], is because you didn't load the property but the whole object. Properties are firstName, lastName, address, phoneNumber Objects are instances of the class Person

I have highlighted the problems in the code so you can learn more from it.

//  A
class Person
{
    constructor(firstName,
                lastName,
                address,
                phoneNumber)
    {
        //  javascript uses lower camelcase.
        this.firstName   = firstName;
        this.lastName    = lastName;
        this.address     = address;
        this.phoneNumber = phoneNumber;
    }

    //  B
    getFullName()
    {
        return this.firstName + ' ' + this.lastName;
    }
}

//  create the list of people.
let persons = [
    new Person("Anton", "Andersson","Nonstans", "1324565451"),
    new Person("Felix", "Berge", "Krillan", "1234567889"),
    new Person("Oscar", "Rells", "Essingen", "1234567888"),
    new Person("Theodor", "Johansson", "Hemma", "1234567810"),
    new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892")
];

//  iterate persons array using length.
for (let i=0; i<persons.length; i++)
{
    //  C
    document.getElementById('personLista').innerHTML += persons[i].getFullName() + '<br />';
}

Hope it helps, good luck!

edited Oct 6, 2017 at 21:36

answered Oct 6, 2017 at 20:37

Kai

1,2601 gold badge9 silver badges19 bronze badges

2 Comments

Scott Marcus Over a year ago

you had 'textContent' here, but you should use 'innerHTML' to write text on screen Well, it depends on what the text is. If the content contains HTML, then yes, use .innerHTML so that code gets parsed. But, if there is no HTML to parse, then .textContent is better as it doesn't unnecessarily invoke the parser. In the OP's case, it's correct to use .textContent because he's only writing pure text (no HTML).

Kai Over a year ago

Oh Wow, I updated my answer. I didn't even knew that .textContent was an actual thing. Will remember this one :).

Collectives™ on Stack Overflow

object Object issue Javascript

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related