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, Sep 12 '15 at 17:30

score 1 · Answer 1 · answered Sep 12 '15 at 17:37

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 '15 at 17:37

baao

71,625
17
143
203

if that is true, how come in @ charlietfl & @Lauromine examples work via jsfiddle? – kronis72 Sep 12 '15 at 17:53
I'm not sure if you have seen the code, both of them are doing it exactly as I wrote... @kronis72 – baao Sep 12 '15 at 17:57
scratch that, I see the difference in the code and why that is. thanks – kronis72 Sep 12 '15 at 17:59

Lauromine · Answer 2 · 2015-09-12T18:03:44.127

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/

on id3 when i want to acess the id_num do i use IdArray[i].id_num and not IdArray[i].id — kronis72, Sep 12 '15 at 17:55
@kronis72 You use `IdArray[i].id_num` but you can replace `this.id_num = ..` by `this.id = ..` to access it with `IdArray[i].id` — Lauromine, Sep 12 '15 at 17:57
thanks, i just tried it after the fact and answered my own question. — kronis72, Sep 12 '15 at 17:58

score 1 · Answer 3 · answered Sep 12 '15 at 17:40

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 '15 at 17:40

Zakaria Acharki

66,747
15
75
101

score 1 · Answer 4 · answered Sep 12 '15 at 17:41

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 '15 at 17:41

charlietfl

170,828
13
121
150

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 – kronis72 Sep 12 '15 at 17:46
should be working, I checked your code using firebug and that's how I detected the issues – charlietfl Sep 12 '15 at 18:06

score 1 · Answer 5 · answered Sep 12 '15 at 17:43

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 '15 at 17:43

JM Yang

1,208
9
14

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 – kronis72 Sep 12 '15 at 18:06
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: http://stackoverflow.com/questions/7306669/how-to-get-all-properties-values-of-a-javascript-object-without-knowing-the-key – JM Yang Sep 12 '15 at 18:34

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

5 Answers5