Check value against array and return another value

Question

I'm building a click type game and I need to see if the answer the user selected is correct by comparing it to an array.

This is the JSON

    {
     quiztitle: "Select the States",
     correct_answers: "9",
     states: [
       {
        state_name: "Alabama",
        image: "alabama_image",
        answer: "correct"
       },

       {
        state_name: "Alberta",
        image: "alberta_image",
        answer: "incorrect"
       },
ect...

When a user clicks a button, it takes the value and needs to check if it's correct. What is the best way to do this.

This is my attempt so far:

 $('body').on('click', '.matchBtns', function(){
                    var value = $(this.innerHTML);
                    if($.inArray(value, data.states)){
                       //its in the array
                       }else{
                         //its not
                         }
            });

I'm unsure how to access the value 'answer' to check if correct or not

This is the html button

<button class="matchBtns">*State Name Here*</button>

Christian · Accepted Answer · 2015-07-26 23:52:38Z

2

You've got a bit of the way, but there's still a lot to do. First off, you don't want a jQuery object of the text inside the button; you just want the text. So you can do something like this:

var value = $(this).text();

Secondly. $.inArray won't work for two reasons. One - It's a multidimensional array of objects. Two - you don't just want to check if it's in the array; you want to check if it's in the array and has the correct property.

So, you could iterate over the array and see if any of the answers are correct:

$('body').on('click', '.matchBtns', function() {
    var value = $(this).text();
    var correct = false;

    $.each(data.states, function(i, state) {
        if ( state.state_name == value && state.answer == 'correct' ) {
            correct = true;
            return false; // break out of $.each()
        }
    });

    if ( correct ) {
        // true
    }
    else {
        // false
    }
});

Here's a working jsFiddle: https://jsfiddle.net/s0gtqjcL/

You could simplify this by storing answer (or correct) as a boolean, not a string. That way, you could do something like this:

if ( state.state_name == value && state.correct )

edited Jul 26, 2015 at 23:52

answered Jul 26, 2015 at 23:29

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dale Over a year ago

This is currently returning all answers as wrong atm @christian varga

Christian Over a year ago

@Dale I was accidentally checking state.correct instead of state.answer. I've fixed this up (check my edited answer). Make sure you read over people's answers before copying them to see if you can spot issues like this - it's pretty easy to spot, and you don't want to get into a habit of just blindly copying answers hoping that they'll work. Quite often, you'll need to modify answers to suit your needs.

Dale Over a year ago

I was reading I promise! Just new at jquery & overly tired. I appreciate your help, this code is working now.

Christian Over a year ago

@Dale Haha sorry mate I was probably a bit rude there. It's easy for me to say that it's easy to spot when I've been doing it so long :p. Anyway, glad it's working for you!

Tomasz Lewowski · Accepted Answer · 2015-07-26 23:28:51Z

0

if you like underscore you may try:

$('body').on('click', '.matchBtns', function(){
                    var value = $(this.innerHTML);
                    if(_.contains(_.pluck(data.states, "answer"), value)) {
                       //is in the array
                       }
                     else{
                         //is not
                      }
            });

_.pluck(array, "x") is a shorthand for _.map(array, function(x){return x.x;), so that you won't try to compare string and object

answered Jul 26, 2015 at 23:28

Tomasz Lewowski

1,97522 silver badges29 bronze badges

Comments

Ibu · Accepted Answer · 2015-07-26 23:32:01Z

0

You are going to have to loop through the answers.

 $('body').on('click', '.matchBtns', function(){
   ...
   var value = this.innerHTML;
   for (var i = 0,l = data.states.length; i< l; i++){
       if (data.states[i].state_name === value && data.states[i].answer === 'correct'){
           /// is correct
           break; // to stop the loop
       }else {
          // not correct, continue
       }
   }
   ...
}

answered Jul 26, 2015 at 23:32

Ibu

44k14 gold badges82 silver badges109 bronze badges

Collectives™ on Stack Overflow

Check value against array and return another value

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related