Thinking through problem: JSON with toggles to show/hide content

[shaneisme]

The problem I have to solve is this:

Given some JSON (with objects nested inside) that returns BOOLEAN values (eg. motherboards.newMotherboard.memory.ddr4 will return true), I need to show or hide content that returns true.

That part is relatively easy. I’ll have a list of, say, pictures of motherboards and if you toggle on the “DDR4” switch, it will show all the motherboards that return true on that.

But the problem is there’s going to be about 10 questions, each with a yes/no toggle, and I’ll need to iterate over the object to return only the images that match all the “true” or “false” switches the user selects.

I can probably build some huge thing that does this one by one, but I was wondering if there’s a construct or something I can research to get me started down this road?

I don’t really want to set up a listener on all of the radio switches and iterate over everything each time something is changed… or maybe I should? It seems like that wouldn’t be terribly performant.

P.S. I posted this in JS assuming I should use only that. If there’s some other tech I should look into I’m open minded about it.

[shaneisme]

OK so, here’s what I came up with.

http://codepen.io/drainpip/pen/Jdeqxw

The process is like this:

• Build JS Object model
• Listener is set on any input, each time one is clicked it will set up an array of everything that is currently :checked
• Pass this array to a few loops that iterate over the model, if the object is set true it continues, but if any answer is false it will give it the offClass
• CSS controls what will happen to the individual items in the DOM, in this case it just turns them green for on, or red for off.
• I’m using data- attributes to store what data I need to check the [data-picker=object] against the model

Things seem to be working fine, but there’s three full iterations here every click. If anyone can think of something to simplify it I’m all ears.

[shaneisme]

This was the final result:

http://www.asus.com/us/site/motherboards/Z170/ (at the bottom)

[Alen]

@shaneisme

Looking good.

The only thing, on mobile, it wasn’t initially clear where the results are being displayed, but just a minor thing… good job

[shaneisme]

The only thing, on mobile, it wasn’t initially clear where the results are being displayed

Yeah that was a challenge. Our thought was to make it feel like answering questions while you scroll down and naturally get to the result.

We’ll still experiment with ways of making it more clear.

[Author]

Posts