Skip to main content

Forums

This topic contains 4 replies, has 2 voices, and was last updated by  shaneisme 4 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #205711

    shaneisme
    Participant

    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.

    #205794

    shaneisme
    Participant

    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.

    #206790

    shaneisme
    Participant

    This was the final result:

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

    #206875

    Alen
    Participant

    @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

    #206878

    shaneisme
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star