loop through returned JSON with keycode

Question

I'm new to jQuery. I want to display content of a flash card when the page does the first loading, and users press Spacebar to show the answer. After users choose right or wrong, then the answer part will disappear. I got stuck at displaying and hiding the answer, also incrementing the index for loop.

Here is what I have done so far. I really appreciate any help!

$(document).ready(function() {

    var list = new Array();
    //get JSON from server
 $.get( "classes/getJSON.php", function( data )
    {
         var parsedData = $.parseJSON(data);
        list = parsedData;
        return list;


    });// end get

    // loop through the array and display content

    var index = 0;
    window.on("keypress", function(event){


        var keycode = (event.keyCode ? event.keyCode : event.which);

        // press Spacebar to show answer

        if(keycode == "32")
        {
            $(".cards_back").show();
        }

        //press arrow key to choose right or wrong
        else if (keycode == "37")
        {

            index +=1 ;
            var div_idword = "<span>" + list[index] + "</span>";
            $(". audio").html(div_idword);
            var $idword = list[index].idword;
            var $box_num = parseInt(cards[index].box_num) + 1;
            $(".cards_back").hide();

        }
        else if (keycode == "39")
        {
            index +=1 ;
            var div_idword = "<span>" + cards[index].audio + "</span>";
            $(". audio").html(div_idword);
            var $idword = cards[index].idword;
            var $box_num = parseInt(cards[index].box_num) - 1;
            if($box_num < 0){
                $box_num = 0;
            }

            $(".cards_back").hide();
        }



        $.ajax(
            {
                url : "classes/update_box_num.php",
                type : "POST",
                data : {'idword':$idword, 'box_num':$box_num},
                success : function(data, textStatus, jqXHR){
                    alert("changed");
                }
            }
        );// end ajax
    });// end onclick



}); // end ready

I think it would help a lot if you put it in http://jsfiddle.net/ you can choose jquery to use with it. You could leave out $.get and $.ajax.... — Luke Wenke, Feb 05 '14 at 03:08
$(". audio").html(div_idword); should either be .audio or have no dot... — Luke Wenke, Feb 05 '14 at 03:19
the cards array isn't defined. I think you should only use $ to start a variable name in javascript if it is a jQuery object... - not for integers like $box_num. — Luke Wenke, Feb 05 '14 at 03:44

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

Here is some code for handling arrows and spacebars:

http://jsfiddle.net/5A9nK/3/

$(document).keyup(function(e){
    switch(e.which) {

See: Binding arrow keys in JS/jQuery

For incrementing the cards you could have:

var cardsArray = [get from JSON];
var currentCardIndex = 0;

function getCurrentCard() {
    return cardsArray[currentCardIndex];
}

function nextCard() {
    currentCardIndex++;
    if (currentCardIndex >= cardsArray.length) {
        currentCardIndex = cardsArray.length - 1;
    }
}

I don't know much about object-oriented javascript so this just uses global variables and functions. You could make it do something when it goes past the last card.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 05 '14 at 03:14

Luke Wenke

1,149
2
23
43

This helps me a lot. Thanks @Luke Wenke! I have an issue with incrementing the index after press a arrow key. Could you make an simple loop? – kent Feb 05 '14 at 06:32
You could use a $.each http://api.jquery.com/jquery.each/ or a for loop with i < arr.length. But I don't think it should be a loop like that. I'll edit my answer.... – Luke Wenke Feb 05 '14 at 07:00

loop through returned JSON with keycode

1 Answers1