JavaScript property duplicates [dot vs bracket]…

Question

I have an issue where I try to count combinations. I try to solve it with JavaScript, but have some issues... Example for the different sets:

var colors    = ["Yellow", "Blue"];
var decisions = ["Yes", "No"];

As a first step I create an empty object and try to fill it with the two arrays and initialize a counter for each combination:

var myObject = {};
for ( colorIndex in colors ) {
   myObject[colors[colorIndex]] = {};
   for ( decisionIndex in decisions ) {
      myObject[color][decisions[decisionIndex]] = 0;
   }
}

In a next step I try to count results I got - Example:

var color = "Yellow";
var decision = "Yes";
myObject[color][decision] += 1;

Debugging (what I tried)

However, the result I am getting is something like:

Yellow: {Yes: 0, No: 0, Yes: NaN}

When I try to debug whats happening then I make the observation that the variables shortcodes are as follows:

myObject.Yellow.Yes    = 0
myObject.Yellow.No     = 0
myObject.Yellow["Yes"] = NaN

At this point I am not sure if I left away anything important, but does anyone of you know whats going on? I thought the brackets and dot-notation should be equivalent, even though I don't know how the dot-notation has been created here, since Yes and No were strings...

Can you pinpoint me in a direction?

Thanks for reading this.

Edit: Change to forEach-loop:

Based on recommendations I changed the loop to:

var myObject = {};
colors.forEach(function(color) {
   myObject[color] = {};
   decisions.forEach(function(decision) {
      myObject[color][decision] = 0;
   });
});

However, the problem remains that I get the NaN -case

Answer 1

i modify your code as bellow, and works fine , the problem is the way you use for in
also you have wrong code on for ( decisions in decision ) that should be for ( decision in decisions )

var colors    = ["Yellow", "Blue"];
var decisions = ["Yes", "No"];

var myObject = {};
for ( color in colors ) {
   myObject[colors[color]] = {};
   for ( decision in decisions ) {
      myObject[colors[color]][decisions[decision]] = 0;
   }
}

var color = "Yellow";
var decision = "Yes";
myObject[color][decision] += 1;

Answer 2

Dude, typo error in your second loop. You have written

decisions in decision

Whereas, it should be

decision in decisions

Everything ia fine.

Answer 3

Try

var myObject = {};
colors.forEach(function(color){
myObject[color] = {};
 decisions.forEach(function(decision){
   myObject[color][decision] = 0;
  })
})

As colors and decisions are arrays, you should not use for-in to loop through

Answer 4

With stringify - A hidden line-break.

I continued reading and found this post here .

By stringify-ing my two inputs color and decision I noticed that they are not "equal" in a way they seemed by just logging it to the console, it turns out that one of them had a line-break in it ( \\r )...

JSON.stringify(color)
> "\"Yellow"\"

JSON.stringify(decision)
> "\"Yes\r\""

I know that, that was not clear from how I asked the question, and my example would not have allowed you to reveal that.

I'm going to do some research on how to get rid of that, but I think it should be fairly simple.

Sorry my question wasn't that clear, but I did not expect that this was the reason. Thank you very much for your help though. Very appreciated!