Trying to add fields to a javascript object

Question

I have a foreach loop (writen using MVC3's Razor engine) and I need to create a new object in the Popups array every iteration. Here's what I'm trying to run:

var popups = [];
var count = 0;

@foreach (var marker in Model) {
    <text>
    popups[count]["content"] = document.createElement("div");
    popups[count]["content"].class = "infobox-custom";
    popups[count]["content"].style.cssText = "padding: 5px; width: 600px;";
    popups[count]["content"].innerHTML = '<div class="professional"><h1>test</h1></div>';

    popups[count]["infobox"] = new InfoBox();

    popups[count]["marker"] = new MarkerInfo();
    count++;
    </text>
}
console.log(popups);

I'm getting the error:

Uncaught TypeError: Cannot set property 'content' of undefined

As you can see, I'm trying to encapsulate each individual marker's related information in a javascript object. I'm aiming to access everything I need by using something like popups[index].marker or popups[index].content.

I'm reading the book Javascript: The Good Parts and there is one part that mentions:

If the object does not already have that property name, the object is augmented:

What am I missing here?

Musa · Accepted Answer · 2012-11-26 02:45:38Z

2

Set popups[count] to an object before you start adding properties to it.

var popups = [];
var count = 0;

@foreach (var marker in Model) {
    <text>
    popups[count] = {};
    popups[count]["content"] = document.createElement("div");
    popups[count]["content"].class = "infobox-custom";
    popups[count]["content"].style.cssText = "padding: 5px; width: 600px;";
    popups[count]["content"].innerHTML = '<div class="professional"><h1>test</h1></div>';

    popups[count]["infobox"] = new InfoBox();

    popups[count]["marker"] = new MarkerInfo();
    count++;
    </text>
}
console.log(popups);

answered Nov 26, 2012 at 2:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

gdoron · Accepted Answer · 2012-11-26 02:43:35Z

1

You need to make popups an array of objects.

popups[count] = {}; // <<<<<<<<<<<<<<<<-----------------------------------
popups[count]["content"] = document.createElement("div");
popups[count]["content"].class = "infobox-custom";
popups[count]["content"].style.cssText = "padding: 5px; width: 600px;";
popups[count]["content"].innerHTML = '<div class="professional"><h1>test</h1></div>';

answered Nov 26, 2012 at 2:43

gdoron

151k59 gold badges302 silver badges376 bronze badges

Collectives™ on Stack Overflow

Trying to add fields to a javascript object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related