CODEWITHSUNDEEP
javascriptarraysgoogle-chrome-extensioncontextmenu
Phil Gref
Phil Gref

Reputation: 987

JavaScript array won't fill up properly

I'm making a Google Chrome Extension that uses context menus as its main UI. Each menu item triggers the same content script, but with different parameters. What I basically did is store every item (and its corresponding data) in the form of a JSON object that has the following form : 

{name, parent_id, rule_number, meta_array[], childCount}

name, child_count and parent_id are used to create the hierarchy when the context menus are built. The data that's passed to the script is rule_number (int) and meta_array (array of strings). All of these objects are stored into an array called indexData[].

When a menu item is clicked, the id provided is just used as an index in the "indexData" array to get the right data and pass it to the script.

For example:

// Iterates through the objects
for(var j = 0; j < objectsArray.length; j++) {

// Context menu created with unique id
var id = chrome.contextMenus.create({
"title": objectArray[j].name, 
"onclick": injectScript,  
"parentId": objectsArray[j].parent_id });

// Stores the objects at the corresponding index
indexData[id] = objectsArray[j]; }

Now, there was a particular large set of data that comes back often. Instead of listing every single of these elements every time I wanted them as part of my menu, is just added a boolean parameter to every JSON object that needs this set of data as its children. When the menus are created, a function is called if this boolean is set to true. The script then just iterates through a separate list of objects and makes them children of this parent object. The created children even inherit certain things from the parent object.

For example, if a parent object had a meta_array like such ["1", "2", "3", "4"], its children could all look like so ["1", "2", custom_children_data[3], "4"].

The problem is that this last part doesn't work. While the children are created just fine and with the right name, the data that's associated with them is wrong. It's always going to be the data of the last object in that separate list. This is what the function looks like:

// Iterate through children list
for(var i = 0; i < separateList.length; i++){ 

// Just copying the passed parent object's data
var parentData = data; 

var id = chrome.contextMenus.create({
"title": separateList[i].name, // Get item [i] of the children list (works fine) 
"onclick": injectScript, 
"parentId": parentId           // Will become a child of parent object
 });


// Trying to change some data, this is where things go wrong.
parentData.meta[2] =  separateList[i].meta; 

// Save in indexData
indexData[id] = parentData; }

On the loop's first iteration, parentData.meta[2] gets the right value from the list and this value is thereafter saved in indexdata. But on subsequent iterations, all the values already present in indexData just get swiped away and replaced by the latest data being read from the list. When the last value is read, all the newly added elements in indexData are therefore changed to that last value, which explains my problem. But why on earth would it do that ? Does Java somehow treat arrays by address instead of value or something in this case ?

Maybe I'm missing something really obvious, but after many attempts I still can't get this to work properly. I tried to be as specific as possible in my description, but I probably forgot to mention something, so if you want to know anything else, just ask away and I'll be happy to provide more details.

Thanks.

Upvotes: 2

Views: 274

Answers (2)

Paul
Paul

Reputation: 141887

The problem would be indexData[id] = parentData where you are making indexData[id] a reference to parentData, and then modifying parentData on the next iteration of your loop.

Since parent data is not a simple array (It contains at least one array or object), you cannot simply use slice(0) to make a copy. You'll have to write your own copy function, or use a library which has one.

Upvotes: 3

Jacob
Jacob

Reputation: 78890

My guess is that this is where your problem lies:

// Just copying the passed parent object's data
var parentData = data;

This does not, in fact, copy the data; rather, it creates a reference to data, so any modifications made to parentData will change data as well. If you're wanting to "clone" the data object, you'll have to do that manually or find a library with a function for doing so.

Upvotes: 3

Related Questions