0

Learning a lot about Jquery every day. However it seems I can't for the life of me figure out how to display items in this multidimensional array one item at a time, while fading in and out of each one. *Note I don't wants these to append, just display one set, then fade out and fade in to the next set. Here's some info for you pros.

Basically Here I am storing what I have in my json Object named data into result. This seems to loop through each time as if i put alert(result['question']) it will give me each value one at a time, however when trying to apply this to my div, in which I am using a span class called .Active, it will just loop through the entire thing and give me the last item in the array. 2+2 lol duh 1 2. What I am doing wrong here?? If need be I will try to rig a jfiddle for it.

object coming from php page (called data)

[{"id":"238","question":"Which of these is a noun?","answer":"horse"},{"id":"238","question":"Which of these is a noun?","answer":"long"},{"id":"238","question":"Which of these is a noun?","answer":"pretty"},{"id":"238","question":"Which of these is a noun?","answer":"hair"},{"id":"238","question":"2+2 lol duh 1 2","answer":"4"}]

Code

for (var i = 0; i < data.length; i++) {
    result = data[i];
    console.log(result['question']);


    liText += '<span><h5>'+result["question"]+'</h5>';
    liText += '<p><b>Option:&nbsp;</b>'+result["answer"];

    liText += '</p></span>';


    $.each(result['question'], function(index) {
        $(this).delay(400*index).fadeIn(300);


    });
    $('.Active').text(result['question']);

    }

Console Log of result[question] *note these are correct, 5 different questions, the first 4 are the same. 

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

2+2 lol duh 1 2

ps * a million respect points if you can get it to work with the liText I have above instead :)

edit*

When removing the .each and moving up some things around this seems to work, anyone that can help me first out the fadein and fade out of each I would appreciate it. Located in $('.Active')

for (var i = 0; i < data.length; i++) {
    result = data[i];
    alert(result['question']);
    $('.Active').text(result['question']);
Meowpheus
  • 107
  • 2
  • 14
  • That is not a multidimensional array, it is an array of objects. – James Montagne Feb 08 '13 at 20:29
  • My console log does not repeat, those are the correct items inside the tables I am using they are not duplicated. I just used the same question 4 times and then a different question on the fifth. If you see my console log it is correct. The items just wont fade in between. I don't think what your recommending is my problem but thanks for the reading anyways. – Meowpheus Feb 08 '13 at 20:48
  • What is your intent in doing `$.each(result['question'], function(index) {`? Since `result['question']` is a string, it doesn't make much sense to loop over it. – James Montagne Feb 08 '13 at 20:56
  • Well I basically wanted to display everything in result['question'], it seems like the FOR loop does this fine but I can't output them one at a time. I was thinking the .each was wrong and hence was asking for help. I really just want to display basically result[1]['question'] fade out, fade in result[2]['question']fade out, fade in... etc but my understanding of the data may be wrong. – Meowpheus Feb 08 '13 at 21:00

1 Answers1

0

Give this a try:

for (var i = 0; i < data.length; i++) {
    result = data[i];

    var $question = $("<span>").text(result['question']).hide()
                               .delay(400*i).fadeIn(300);

    $('.Active').append($question);
}

I removed the liText part entirely as you were not doing anything with it.

http://jsfiddle.net/Qf3FZ/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Hey James the .delay(400*i).fadeIn(300); throws a token error in Zend. Is that the correct format? – Meowpheus Feb 08 '13 at 21:08
  • I had an extra semi-colon in the first version. I fixed it almost immediately but you must have copied the code before I did. – James Montagne Feb 08 '13 at 21:09
  • Ahh ok, I applied the code. It gets each item to append one after another but I was looking more for each item to replace the previous. Ie remain one item of a list instead of having 5 list items at the end. I tried using.html and .replaceWith with your code and it either gives just the first or just the last item if I use those. – Meowpheus Feb 08 '13 at 21:14
  • This worked for me for after a bit of fiddling – Meowpheus Mar 01 '13 at 15:27