0

So, I spent way to many hours figuring this problem out. So basically, I have this for loop, which should add all the unique elements to a separate array.

var categories = [];                  
var category = {
            "name": "",
            "id": "",
            "icon": "",
            "subcategory": []
        };

for (var i = 0; i < array.length; i++) {
            var add = false;
            for (var j = 0; j <= categories.length; j++) {
                if (!objectExists(categories, array[i].zones[0].description)) {
                    add = true;
                }
            }
            if (add) {
                category.name = array[i].zones[0].description;
                category.id = generateUUID();
                category.icon = array[i].zones[0].description;
                category.subcategory = [];
                categories.push(category);
            }
        }

 var objectExists = function (array, name) {
        for (var i = 0; i < array.length; i++) {
            if (array[i].name === name) {
                return true;
            }
        }
        return false;
    };

This does not work, since the object category will never change the different properties, they will remain the same (at least in my case). If I create the variable category inside the if (add) { ... } this way:

        if (add) {
            category = {
                "name": "",
                "id": "",
                "icon": "",
                "subcategory": []
            };
            category.name = array[i].zones[0].description;
            category.id = generateUUID();
            category.icon = array[i].zones[0].description;
            category.subcategory = [];
            categories.push(category);
        }

It works. Can someone explain to me what happens? I've been trying to read some literature about it, but cant find anything that fits this case.

Here's a fiddle displaying what I'm experiencing. http://jsfiddle.net/fAypL/1/

petur
  • 1,366
  • 3
  • 21
  • 42
  • 4
    In javascript, objects are passed by reference: you're always modifying the original category object in the first example. – doldt Apr 23 '15 at 06:51
  • Yeah, but I'm writing over the objects properties each time in the for-loop, aren't I? – petur Apr 23 '15 at 06:54
  • 2
    You are manipulating a reference of the object, not the object itself. So you have to create a new object every time - like you do in your second example. – Stephan Weinhold Apr 23 '15 at 06:54
  • 1
    In other words your categories array is full of the same category object (its reference) and you always rewrite its properties... – stambikk Apr 23 '15 at 06:54
  • 1
    tl;dr: adding `category={};` before you start manipulating it gets you a fresh object reference instead of changing the old one. – JJJ Apr 23 '15 at 06:55
  • Another option.... look at using a constructor and `new` to create new objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function – Jon P Apr 23 '15 at 06:59
  • 2
    But it's always the same object. Look: an artist wears a blue dress and gives you her address. Then she wears a red dress and gives you her address. She wears a pink dress and gives you her address. Then she asks you to come over (and doesn't change any more). You immediately go to the first address - what dress is she wearing there? Yellow. You go to the second address (but wait, it's the same address!) What dress? Still yellow. You go to the third one: still here, still yellow. What happened to the girl in red and the girl in blue? When you push the object, you aren't copying it. – Amadan Apr 23 '15 at 06:59

0 Answers0