jQuery next and previous JSON data

jQuery next and previous JSON data

I'm currently working on a small interactive, using HTML,CSS and jQuery - Nothing to special.

I have a function that successfully get question data from a json file, but when clicking next or previous the button functions does not seem to trigger and get the next questions data from the array.

Any and all help on this would be appreciated.

Thank you.

HTML

    
Question 1
    
    
    
    
      
              
      
              
    
  
  

JS

function questions(){    var data = [];    var index = 1;      function question() {      $(".two h3").html(data[index].question);    }      $.ajax({      url: '../json/data.json',      type: 'get',      dataType: 'json',      success: function(json) {        data = json;        question();      }    });      $('.two li.next button').on('click', function(index){      console.log(index);      if (index < data.length - 1) {        index += 1;        question();      }    });    $('.two li.back button').on('click', function(index){      console.log('Prev');      if (index > 0) {        index -= 1;        question();      }    });    }  

JSON

{    "1": {      "question": "Which one of the five is least like the other four?",      "values": ["Snake", "Rat", "Lion", "Pig", "Cow", "Goat"],      "answer": "Snake"    },    "2": {      "question": "Which number should come next in the series?
1 - 1 - 2 - 3 - 5 - 8 - 13",      "values": ["8", "13", "21", "26", "31"],      "answer": "21"    },    "3": {      "question": "Which one of the five choices makes the best comparison?
PEACH is to HCAEP as 46251 is to",      "values": ["25641", "26451", "12654", "51462", "15264"],      "answer": "15264"    }  }  

Answer by Deepak Sharma for jQuery next and previous JSON data

declare var data = []; out of questions() function. Make it global

Answer by Taha Paksu for jQuery next and previous JSON data

Rewrite it like this:

var data = []; var index = 0;    function question() {      if(data[index] != undefined)      {                  $(".two h3").html(data[index].question);       }  }    function questions() {      $.ajax({          url: '../json/data.json',          type: 'get',          dataType: 'json',          success: function(json) {              data = json;              question();          }      });      }    $('.two li.next button').on('click', function() {      console.log(index);      if (index < data.length - 1) {          index += 1;          // enabling the buttons would be useful here          question();      } else {          alert("No more questions");      }  });     $('.two li.back button').on('click', function() {      console.log('Prev');      if (index > 0) {          index -= 1;          question();      } else {          alert("This is the first one.");      }   });  

Answer by Govind Samrow for jQuery next and previous JSON data

Remove index parameter from click even function because 1st parameter in click event handler contain even data.

Because "index" is directly accible under this function :

 $('.two li.next button').on('click', function(){      console.log(index);    });    $('.two li.back button').on('click', function(){  console.log(index);    });  

Answer by madalin ivascu for jQuery next and previous JSON data

Try the following code

  $.ajax({      url: '../json/data.json',      type: 'get',      dataType: 'json',      success: function(json) {        data = json;        $.each(data,function(i,v){            var answ = '';            $.each(v.values,function(x,t){ answ +='
'+t+'
'; });           $('body').append('  
Question '+i+'
'+v.question+'
'+answ+'
    
      
              
      
              
    
  
');        });        $('.two:first').show();      }    });      $('body').on('click','.two li.next button', function(index){     $(this).closest('.two').hide();     if($(this).closest('.two').is('.two:last')) {      $('.two:first').show();     } else {      $(this).closest('.two').next().show();     }    });    $('body').on('click','.two li.back button', function(index){     $(this).closest('.two').hide();     if($(this).closest('.two').is('.two:first')) {      $('.two:last').show();     } else {      $(this).closest('.two').prev().show();     }    });  

Demo:https://jsfiddle.net/9crboc3b/

Answer by marchen for jQuery next and previous JSON data

$('.two li.next button').on('click', function(index){      console.log(index); //index is a event not the index you defined      if (index < data.length - 1) {          index += 1;          question();      }  });  

you can change the function(index) to function(event) that is fine

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72