How to access object inside of an object javascript

Question

I have a object initial state as follow:

answersCount: {
    Colors: {
      Green: 0,
      Brown: 0,
      Blue: 0,
      Red: 0
    },
    Letters: {
      A: 0,
      B: 0,
      C: 0,
      D: 0,
    },
    Briggs: {
      EI: 0,
      SN: 0,
      TF: 0,
      JP: 0
    }
},

I have a setUserAnswer function as follow :

setUserAnswer(answer) {
 if(answer.trim()) {
   const answer_array = answer.split(',');
   let updatedAnswersCount = null;
   const answersCount = this.state.answersCount;
   // copy this.state.answersCount
   let answerCountUpdates = update(answersCount, {$merge: {}});

   answer_array.forEach((answer) => {
     answerCountUpdates = update(answerCountUpdates, {
       [answer]: {$apply: (currentValue) => currentValue + 1}
     });
   }, this);

   updatedAnswersCount = update(answersCount, {$merge: answerCountUpdates})
   this.setState({
    answersCount: updatedAnswersCount,
    answer: answer
  });
 }
}

I am using react-addons-update using $apply update the value, and this setUserAnswer function will set the answer base on user selection and increment that value by +1

The question is, after user click on HellYa button, I want to make my result look like this :

answersCount: {
    Colors: {
      Green: 0,
      Brown: 1,
      Blue: 0,
      Red: 0
    },
    Letters: {
      A: 0,
      B: 0,
      C: 0,
      D: 1,
    },
    Briggs: {
      EI: 0,
      SN: 0,
      TF: 0,
      JP: 1
    }
  },

But now its only outputting like so:

answersCount: {
    Colors: {
      Green: 0,
      Brown: 0,
      Blue: 0,
      Red: 0
    },
    Brown: null
    Letters: {
      A: 0,
      B: 0,
      C: 0,
      D: 0,
    },
    D: null
    JP: null
    Briggs: {
      EI: 0,
      SN: 0,
      TF: 0,
      JP: 0
    }
  },

if it helps i have a quizQuestion.js for questions and answers for example:

{
 question: "I am task oriented in order to achieve certain goals",
 answers: [
  {
    // briggs, color, letter
    type: "JP,Brown,D",
    content: "Hell Ya!"
  },
  {
    type: " ",
    content: "Nah"
  }
 ]
}

Answer 1

How about taking a different approach, like this...

let answersCount = {
    colors: {
      Green: 0,
      Brown: 0,
      Blue: 0,
      Red: 0
    },
    letters: {
      A: 0,
      B: 0,
      C: 0,
      D: 0,
    },
    briggs: {
      EI: 0,
      SN: 0,
      TF: 0,
      JP: 0
    }
};

let applyAnswer = (answer) => {
 // example answer = "JP,Brown,D"
 let answerArr = answer.split(',');
 let briggsAnswer = answerArr[0];
 let colorsAnswer = answerArr[1];
 let lettersAnswer = answerArr[2];
 answersCount['briggs'][briggsAnswer] += 1;
 answersCount['colors'][colorsAnswer] += 1;
 answersCount['letters'][lettersAnswer] += 1;
 return answersCount;
}

then every time you get a "Hell Ya", you just call the applyAnswer() function with your answer string like so...

applyAnswer('JP,Brown,D');

UPDATE: I just realized that since we're using ES6 anyway, we can clean this up by destructuring the arguments.

let applyAnswer = (answer) => {
 // example answer = "JP,Brown,D"

 const  [ briggsAnswer, colorsAnswer, lettersAnswer ] = answer.split(',');

 answersCount['briggs'][briggsAnswer] += 1;
 answersCount['colors'][colorsAnswer] += 1;
 answersCount['letters'][lettersAnswer] += 1;
 return answersCount;
}