Loop through javascript array and display each element in JQuery Dialog

Question

I have just started learning JQuery. And I encountered with this.I have two different arrays 'good' and 'bad'. Each array has certain messages inside it. Now I am trying to display each element from each array in a JQuery Dialog box. I am trying to open a dialog box with each element and fade it out after certain time. But I am getting only last element displayed. I tried changing the timing with delay and fade-out, but couldn't get there. Pointing me to right direction would be greatly appreciated. Currently I am just taking each message from Good and Bad and display it in console and individual dialog. My code is

function show_message(type,index) {
     switch(type) {
         case "good" :
jQuery("#good").children("#goody").each(function() {
var goods = jQuery(this).text();
console.log(goods);
jQuery(this).dialog().html(goods);
});
break;

case "bad" :
jQuery("#bad").children("#baddy").each(function() {
var bads = jQuery(this).text();
console.log(bads);
jQuery(this).dialog().html(bads);
});
break;
     }
 }

    var ar = <? echo $json ?>;

        jQuery.each(ar, function (key, value) {

            if (key === 'good' && ar.success.length !== 0) {
                var count = ar.good.length;
                for (var m = 0; m < count; m++) {
                   jQuery("#good").prepend('<div id= "goody">' + ar.good[m] + '</div>');
                   show_message('good',m);
                }

            } else if (key === 'bad' && ar.bad.length !== 0) {
                var counter = arr.bad.length;
                for (var n = 0; n < counter; n++) {
                       jQuery("#bad").prepend('<div id="baddy">' + arr.error[n] + '</div>');
                    show_message('bad',n);
                }
            } 
        });

Answer 1

Seems you have to change this part

var goods = jQuery(this).text();

For every iteration it is creating the a new variable good/bad and assigning to it.So you have only the last text being assigned.

You can try this one

function show_message(type,index) {
var goods="";  // Added variable here
var bads ="";  // Added variable here
     switch(type) {
         case "good" :
jQuery("#good").children("#goody").each(function() {
goods+= jQuery(this).text();  //concatenating the string
console.log(goods);
jQuery(this).dialog().html(goods);
});
break;

case "bad" :
jQuery("#bad").children("#baddy").each(function() {
bads+= jQuery(this).text(); //concatenating the string
console.log(bads);
jQuery(this).dialog().html(bads);
});
break;
     }
 }