July 28, 2015 at 5:58 pm #205711
The problem I have to solve is this:
Given some JSON (with objects nested inside) that returns BOOLEAN values (eg.
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.July 30, 2015 at 9:55 am #205794
OK so, here’s what I came up with.
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
- 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
- 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.August 20, 2015 at 11:32 am #206790
This was the final result:
http://www.asus.com/us/site/motherboards/Z170/ (at the bottom)August 21, 2015 at 9:39 am #206875
The only thing, on mobile, it wasn’t initially clear where the results are being displayed, but just a minor thing… good jobAugust 21, 2015 at 11:09 am #206878
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.
You must be logged in to reply to this topic.