Why can't I build this Javascript object?

Question

I have an object I'm trying to populate from another object (that is, iterate over a return object to produce an object with only selected values from the original). My code looks like this:

var collect = {};

function getHistoricalData(username){
$.getJSON("http://url/" + username + ".json?params",
            function(data){
                for (var i=0; i < data.length; i++) {
                    console.log(i);
                    collect = { i : {text : data[i].text}};
                    $("#wrap").append("<span>" + data[i].text + "</span><br />");

                };
                console.log(collect);
            }); 

}

So I'm using Firebug for debugging, and here's what I know:

• The JSON object is intact
• console.log(i); is showing the numbers 1-20 as expected

• When I log the collect object at the end, it's structure is this: var collect = { i : {text : "the last iteration's text"}};

  So the incrementer is "applying" to the data[i].text and returning the text value, but it's not doing what I expected, which is create a new member of the collect object; it's just overwriting collect.i 20 times and leaving me with the last value.

Is there a different syntax I need to be using for assigning object members? I tried collect.i.text = and collect[i].text = and the error was that whatever I tried was undefined.

I'd love to know what's going on here, so the more in-depth an explanation the better.

Thanks!

Answer 1

The reason you're seeing only one property in the object at the end is that you're not augmenting it in each loop iteration - you're overwriting it.

collect = { i : {text : data[i].text}};

This says: create an object with one property, i, whose value is another object with one property, text, and assign it to the variable collect. What you want to do instead is set a property of the existing collect object for each value of i, where i is the name of the property.

In order to create an object property where the name is set dynamically, you must use array-style syntax, like this: collect[i]. I don't think you can mix array syntax and object literal syntax like you've tried. Try this instead (disclaimer, not tested):

collect[i] = { text: data[i]["text"] };

Answer 2

 collect[i] = {text : data[i].text};

If you use collect[i].text, since collect[i] does not exist before the assignment, it will return undefined, which has no text property.

Also:

1. collect.i means collect["i"]. This is totally different from collect[i].
2. You can use an Array and append with .push.

Answer 3

As you already know, the problem is in this line:

 collect = { i : {text : data[i].text}};

Every iteration of the loop, you are erasing the collect object and assigning it a new object as value. That's why in the end it only shows the last iteration.

Try this:

 collect[i] = {text : data[i].text};