print object inside array in javascript

Question

I have an array called list into which I am entering several objects. Each item has a unique id and title.

var number = 0;
var list = [];
var item = {};
var i;

var compute = {
    number : 0,
    newItem : function (input) {
        for (i = 0; i < list.length + 1; i++) {
            var item = {
                id: number,
                title: input
            };
        }
        number++;
        list.push(item);
    }
};

and I'm adding data to the array like so:

compute.newItem("Something Important");
compute.newItem("Another thing");

I'm trying to print out the contents of this array into an HTML list something like this:

<ul id="list">
    <li>Something Important</li>
    <li>Another thing</li>
</ul>

And so on, with each object being printed into its own list element. I'm not sure how to properly print this though? Any thoughts?

I thought something like this might work but I got errors.

var content;
for (i = 0; i < list.length + 1; i++) {
    content += "<li>" + list[i] + "</li>";
}
document.getElementById("list").innerHTML = content;

The error is: cannot set property 'innerHTML' null

(Note that my javascript may just plain suck...I'm very new to this language.)

Each loop iteration, you are creating a new item variable. Then you are throwing all but the last one away. Why do you have that for loop there and why are number++; list.push(item); outside of it? — gen_Eric
– gen_Eric, Commented Jan 8, 2014 at 16:18
number is to keep track of the id (it adds one each time so the id is never the same.) — codedude
– codedude, Commented Jan 8, 2014 at 16:22
How are you calling this JavaScript? You need to call it after the "list" element exists. Either by using window.onload or putting the script after the body/element. — gen_Eric
– gen_Eric, Commented Jan 8, 2014 at 16:22

jameslafferty · Accepted Answer · 2014-01-08 16:30:50Z

4

The HTML:

<ul id="list"></ul>

The JavaScript:

var compute = {
    list : [],
    newItem : function (input) {
        this.list.push({
            id : this.list.length,
            title : input
        });
    },
    printList : function (el) {
        var ul;
        ul = el || document.createElement('ul');
        for (i = 0; i < this.list.length; i += 1) {
            ul.innerHTML += '<li>' + this.list[i].title + '</li>';
        }
        return ul;
    }
};

compute.newItem('foo');
compute.newItem('bar');
compute.printList(document.getElementById('list'));

edited Jan 8, 2014 at 16:30

answered Jan 8, 2014 at 16:24

jameslafferty

2,1822 gold badges21 silver badges25 bronze badges

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

4 Comments

codedude Over a year ago

That's exactly what I was trying to do. Thanks!

codedude Over a year ago

Though I'm not sure what ul = el || document.createElement('ul'); is there for. Is it checking to make sure there is an ul element?

jameslafferty Over a year ago

Because it's more flexible at very little cost. I can pass in an existing list, which will let me append to it, or, if I don't pass one in, I get a new list that I can do whatever I want with.

robertp Over a year ago

When you pass in the list element by its id to the method it won't duplicate it thanks to ul = el || document.createElement('ul');. This way you can make sure you are always working with the same ul element.

Collectives™ on Stack Overflow

print object inside array in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related