create 3 objects for an array then display array using iteration javascript

Question

I need to create 3 objects using different methods. I then need to store those objects in an array. I then need to use iteration to display the results. I have kind of confused myself along the way. I get no results shown. Im not sure exactly whats wrong. I have a button onclick action so you would have to click the button to show the array....

did I create the array incorrectly? Am I accessing the array data incorrectly in the for loop?

html:

    <p id="3"></p>
    <button onclick="ObjectArray()">click me</button>

javascript:

function ObjectArray() {
    // object literal
    var id1 = {
        firstName: "John",
        lastName: "Doe",
        id: "12345"
    };

    // keyword new
    var id2 = new Object;
    id2.firstName = "Adam";
    id2.lastName = "Bakely";
    id2.id = "abcdef";

    // object constructor 
    function employee(first, last, id_num) {
        this.firstName = first;
        this.lastName = last;
        this.id_num = id;
    }
    var id3 = new employee("joe", "john", "abc123");

    //create an array
    var IdArray = [id1, id2, id3];

    //for loop to display results
    var text="";
    var i;

    for (i = 0; x < IdArray.length; i++){
        text += IdArray[i] + "<br>";
    document.getElementById("3").innerHTML = text;
    }  
}

I was also wondering how I could access this array from another function for a future task.

When creating a new object via the keyword new you should add parenthesis like new Object(), even if it may work without — Lauromine
– Lauromine, Commented Sep 12, 2015 at 17:30

baao · Accepted Answer · 2015-09-12 17:37:19Z

1

Your loop is wrong and will end up infinite and break it all, x is not defined and should be i

for (i = 0; i < IdArray.length; i++){
    text += IdArray[i] + "<br>";
}  
document.getElementById("3").innerHTML = text;

Also note that this will just output [object Object] if you want some text, implement toString() or specify the objects property you want to access, e.g.

IdArray[i].firstName

answered Sep 12, 2015 at 17:37

baao

73.5k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kronis72 Over a year ago

if that is true, how come in @ charlietfl & @Lauromine examples work via jsfiddle?

baao Over a year ago

I'm not sure if you have seen the code, both of them are doing it exactly as I wrote... @kronis72

kronis72 Over a year ago

scratch that, I see the difference in the code and why that is. thanks

Zakaria Acharki · Accepted Answer · 2015-09-12 17:40:29Z

1

Correct this two problems and it should work :

id in this line is undefined :
```
this.id_num = id;
```
x in this line is undefined :
```
for (i = 0; x < IdArray.length; i++){
```

Hope this helps.

answered Sep 12, 2015 at 17:40

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

charlietfl · Accepted Answer · 2015-09-12 17:41:09Z

1

Use your browser console to look at errors. It will tell you where problems exist

The first one that will show is id is not defined. Once that is fixed the next one is x is not defined

// object constructor 
function employee(first, last, id_num) {
    this.firstName = first;
    this.lastName = last;
    this.id_num = id; // should be "id_num" not "id"
}

for (i = 0; x < IdArray.length; i++){ // "x" should be "i"
    text += IdArray[i] + "<br>";
     document.getElementById("3").innerHTML = text;
}

Then you will be trying to insert objects as html so try changing

 IdArray[i]

to

IdArray[i].firstName

DEMO

answered Sep 12, 2015 at 17:41

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

kronis72 Over a year ago

i tried to use firebug via firefox but it didnt show me any erorrs, I may not be using it correctly. but I clicked console>all, errors, warnings, and nothing showed... thanks

charlietfl Over a year ago

should be working, I checked your code using firebug and that's how I detected the issues

JM Yang · Accepted Answer · 2015-09-12 17:43:47Z

1

There are two bugs in your code.

Please change this line

this.id_num = id;

To

this.id_num = id_num;

And change

for (i = 0; x < IdArray.length; i++){

To

for (i = 0; i < IdArray.length; i++){

After making above changes you should be able to run the code. If you would like to see the content of the objects in the array directly on page, please also change

text += IdArray[i] + "<br>";

To:

text += JSON.stringify(IdArray[i]) + "<br>";

If you would like to access this array from another function, at the end of this function return this array:

return IdArray;

Then another function can call ObjectArray() to get the array.

answered Sep 12, 2015 at 17:43

JM Yang

1,2089 silver badges14 bronze badges

2 Comments

kronis72 Over a year ago

if i use the JSON.stringify.... it shows the property as well as the value along with the {}, "", etc etc... is the a JSON method i could use to show only the values of the propertys

JM Yang Over a year ago

I'm not aware of a JSON method that returns all property values of a object. If you would like to iterate through object property values, here has the details: stackoverflow.com/questions/7306669/…

Lauromine · Accepted Answer · 2015-09-12 18:03:44Z

1

There was some issues with your code, I removed the inline onlick in the html, your function was never called and I also fixed the undefined properties (x and id were undefined).

Here's a working code :

HTML :

<p id="3"></p>
<button id="myButton">click me</button>

JS:

var ObjectArray = function() {
    // object literal
    var id1 = {
        firstName: "John",
        lastName: "Doe",
        id: "12345"
    };

    // keyword new
    var id2 = new Object();
    id2.firstName = "Adam";
    id2.lastName = "Bakely";
    id2.id = "abcdef";

    // object constructor 
    function employee(first, last, id_num) {
        this.firstName = first;
        this.lastName = last;
        this.id_num = id_num;
    }
    var id3 = new employee("joe", "john", "abc123");

    //create an array
    var IdArray = [id1, id2, id3];

    //for loop to display results
    var text="";
    var i;

    for (i = 0; i < IdArray.length; i++){
        text += IdArray[i].firstName + "<br>";
    document.getElementById("3").innerHTML = text;
    }  
}

Fiddle : https://jsfiddle.net/vqvmngbL/

edited Sep 12, 2015 at 18:03

answered Sep 12, 2015 at 17:39

Lauromine

1,48310 silver badges19 bronze badges

3 Comments

kronis72 Over a year ago

on id3 when i want to acess the id_num do i use IdArray[i].id_num and not IdArray[i].id

Lauromine Over a year ago

@kronis72 You use IdArray[i].id_num but you can replace this.id_num = .. by this.id = .. to access it with IdArray[i].id

kronis72 Over a year ago

thanks, i just tried it after the fact and answered my own question.

Collectives™ on Stack Overflow

create 3 objects for an array then display array using iteration javascript

5 Answers 5

3 Comments

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related