Find a specific key in object and set its value

Question

I have this large object that has the key 'visible' peppered throughout it. I use it to show/hide an item in the UI.

However, I have these buttons named 'Show All' / 'Collapse All' where I would like to change the value for the key 'visible' accordingly. So it shows/hides all the content at once.

The object looks something like this:

{
  toplevelkey: [
    {
      innerKey: someValue,
      visible: false
    },
    {
      innerKey: someValue,
      visible: false
    }
  ],
  visible: true
}

I tried using recursion to solve this, but it didn't really help.

Spectric · Accepted Answer · 2021-07-22T02:58:02.357

1

Here's a recursive solution that uses a for...in to loop through all properties:

const a={toplevelkey:[{innerKey:"someValue",visible:!1},{innerKey:"someValue",visible:!1}],visible:!0};

function toggle(obj, show) {
  if (typeof obj == "object" && obj != null) {
    obj.visible = show;
    for (const key in obj) {
      toggle(obj[key], show);
    }
  }
}
toggle(a, true);
console.log(a);

Interactive demo:

const a={toplevelkey:[{innerKey:"someValue",visible:!1},{innerKey:"someValue",visible:!1}],visible:!0};

function toggle(obj, show) {
  if (typeof obj == "object" && obj != null) {
    obj.visible = show;
    for (const key in obj) {
      toggle(obj[key], show);
    }
  }
}

hide.addEventListener('click', ()=>{ toggle(a, false); console.log(a);})
show.addEventListener('click', ()=>{ toggle(a, true); console.log(a);})

<button id="hide">Hide All</button>
<button id="show">Show All</button>

edited Jul 22 '21 at 02:58

answered Jul 22 '21 at 02:56

Spectric

30,714
6
20
43

is that code supposed to actually run? doesn't change for me. – Riza Khan Jul 22 '21 at 02:57
@RizaKhan Yes, it is. Does it not work for you? I can put it in a fiddle if you wish. – Spectric Jul 22 '21 at 02:58
1

Thank you, it works now! Marked as answer! – Riza Khan Jul 22 '21 at 03:07
@RizaKhan No problem :) Glad to help. – Spectric Jul 22 '21 at 03:16

score 0 · Answer 2 · answered Jul 22 '21 at 03:33

I thought it would be fun to do a straight search replace using string methods. This function will toggle all of your visible: true/false.

It can easily be adapted to set all to be one or the other, but for now it just toggles them. Enjoy!

let data = {
  toplevelkey: [{
      innerKey: 'someValue',
      visible: false,
      sub: {
        innerKey: 'someValue',
        visible: false
      }
    },
    {
      innerKey: 'someValue',
      visible: false
    }
  ],
  visible: true
}

const toggleBool = obj => JSON.parse(JSON.stringify(obj).replace(/visible\":[\w]+/g, function(m, o, s) {
  return `visible":${m.split(":")[1] === 'true' ? false : true}`
}))

console.log(toggleBool(data))

JSON.parse removes the reativity of the element (I'm using this inside of a Vue app) — Riza Khan, Jul 22 '21 at 12:43

Find a specific key in object and set its value

2 Answers2