Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
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)
  • The forum ‘JavaScript’ is closed to new topics and replies.