Looping through object & creating a new one

JavaScript
1

I have a big object like this

var bigObj = {
    'main-dish': {
        'lasagna': true,
        'pasta': false,
    },
    'others': {
        'salad': true,
        'soup': true,
    },
}

and a small one, that should count how many ‘false’ values are for each key in the bigObj
by default all is 0

var smallObj = {
    'main-dish': 0,
    'others': 0
}

I built a UI in Vue.js that updates the booleans in real time
and with every change I check for the true/false with this for loop
The problem: if I update the booleans from the bottom or middle the smallObj is not updated;
Only if I start from the first key: lasagna the smallObj is being updated;

for(var i = 0; i < Object.keys(bigObj).length; i ++) {
    if(Object.keys(smallObj)[i] === Object.keys(bigObj)[i]) {
        for(var j =0; j < Object.keys(bigObj[Object.keys(bigObj)[i]]).length; j++) {

            if(!Object.values(bigObj[Object.keys(bigObj)[i]])[j]) {
                    smallObj[Object.keys(bigObj)[i]]++
                    console.log(Object.keys(bigObj[Object.keys(bigObj)[i]])[j]);
            } else {
                console.log(Object.keys(bigObj[Object.keys(bigObj)[i]])[j]);
            }
        }
    }
}
console.log(smallObj) 
// {main-dish: 1, others: 0}

Is the for loop the right approach? How can I create the smallObj is it’s updated regardless what value I update first?

2

I tried the same with two forEach loops and it worked like I wanted.

3

That is way too many Object.keys… @RadekKosiada
Plus you should stay away from globals…

https://jsfiddle.net/1w5t7s8o/1/

const getMenu = () => {
  return {
      'main-dish': {
          'lasagna': true,
          'pasta': false,
      },
      'others': {
          'salad': true,
          'soup': true,
      }
  }
};

const getReceipt = (menu) => {
	return Object.entries(menu).map(([category, entrays]) => {
  	let total = Object.entries(entrays)
    	.map(([desciption, amount]) => amount ? 1 : 0)
        .reduce((a, b) => a + b);
    return { [category]: total };
  });
};

const initApp = () => {
  const menu = getMenu();
  const receipt = {...getReceipt(menu)};
  console.log(receipt);
};

initApp();
4

Thank you, what I was looking for was this:

Object.keys(bigObj).forEach(k => {
              var counter = 0;
              Object.keys(bigObj[k]).forEach(kk => {
                if (!bigObj[k][kk]) {
                  counter++;
                }
              })
              smallObj[k] = counter;
             })