CODEWITHSUNDEEP
javascript
kronis72
kronis72

Reputation: 311

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

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.

Upvotes: 0

Views: 72

Answers (5)

Lauromine
Lauromine

Reputation: 1493

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/

Upvotes: 1

JM Yang
JM Yang

Reputation: 1208

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.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Correct this two problems and it should work :

  1. id in this line is undefined : 

    this.id_num = id;

  2. x in this line is undefined : 

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

Hope this helps.

Upvotes: 1

baao
baao

Reputation: 73251

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

Upvotes: 1

Related Questions