Looping through an array and changing an html element with each array value

Question

I am pulling in a PHP encoded JSON string, and I am having a hard time getting the Javascript to work how I need it. Let me explain a bit what I am trying to do. I have an image I am trying to change every 20 seconds along with accompanying text. I am having an issue with getting the Looping part working in my javascript code.

Here is my PHP:

public function pull_projects() {
        $sql = $this->db->query("SELECT * FROM project_table LIMIT 4");
        $project_title_array = array();
        $project_sub_title_array = array();
        $project_description_array = array();
        $project_picture_url_array = array();
        foreach($sql->result() as $row) {
            array_push($project_title_array,$row->project_title);
            array_push($project_sub_title_array,$row->project_sub_title);
            array_push($project_description_array,$row->project_description);
            array_push($project_picture_url_array,$row->project_picture_url);
        }
        echo json_encode(array('project_title' => $project_title_array, 'project_sub_title' => $project_sub_title_array, 'project_description' => $project_description_array, 'project_picture_url' => $project_picture_url_array));
    }

The above code outputs:

{  
   "project_title":[  
      "1 STOP RADIO 85.9",
      "Official Slimm",
      "The Lab Community Foundation",
      "Official Michael Wyatt"
   ],
   "project_sub_title":[  
      "www.1stopradio859.com",
      "www.officialslimm.com",
      "www.thelabcommunityfoundation.org",
      "www.officialmichaelwyatt.com"
   ],
   "project_description":[  
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.",
      "Bon App\u00e9tit and epicurious.com joined forces to create an irresistible marketing group called FIG. We brought it to the web for our agency partners Independent Content, creating a rich and immersive online experience that delivers their powerful marketing capabilities to potential clients."
   ],
   "project_picture_url":[  
      "1stopradio859com.png",
      "officialslimmcom.png",
      "thelabcommunityfoundationorg.png",
      "officialmichaelwyattcom.png"
   ]
}

My Javascript code:

$.getJSON("Home/pull_projects", function(data) {

            // Sets global variables for returned json data
            window.$project_title = data.project_title;
            window.$project_sub_title = data.project_sub_title;
            window.$project_description = data.project_description;
            window.$project_picture_url = data.project_picture_url;

            // Turns returned json data into an array
            window.$project_picture_url_array = $.map(window.$project_picture_url, function(el) { return el; });

            window.$project_sub_title_array = $.map(window.$project_sub_title, function(el) { return el; });

            // Loops through and changes each value
            window.$project_picture_url_array.forEach(function(current_value, index, initial_array) {
                setTimeout(function() {
                    console.log(current_value);
                    $('.website_slider > .slider').attr('src','assets/'+current_value);
                }, 5000);
            });
});

My problem is in the ForEach statement in my javascript. When I run it, it outputs the following in the Chrome Terminal:

1stopradio859com.png
officialslimmcom.png
thelabcommunityfoundationorg.png
officialmichaelwyattcom.png

I need it to run and only output one value every 20 seconds not all at once. Any help would be appreciated.

Answer 1

How about this solution. Hope it helps!

var arr = ["1stopradio859com.png" , "officialslimmcom.png", "thelabcommunityfoundationorg.png", "officialmichaelwyattcom.png"];

        $("#test").html(arr[0]).fadeTo(100, 0.1).fadeTo(200, 1.0);

            var str = "";
            var counter = 1;
            var timer = setInterval(function() {
                if(counter == 0){str = arr[counter]}
                if(counter == 1){str = arr[counter]}
                else if(counter == 2){str = arr[counter]}
                else if(counter == 3){str = arr[counter]}
                $("#test").html("<div>"+ str+"</div>").fadeTo(100, 0.1).fadeTo(200, 1.0);
                ++counter;
                if(counter == 4){
                    counter = 0;
                }
            }, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id = "test">
</div>

Answer 2

setTimeout is not a blocking call. The loop will continue to iterate over the collection. All callbacks will fire within a small amount of time between each other instead of over an interval. Use setIntveral instead:

var myArray = ['a', 'b', 'c', 'd', 'e'];
var index = 0;
var x;

function printNextValue() {
  console.log(myArray[index]);
  index = (index + 1) % myArray.length;
}

// This will execute every second until all array elements are printed.
printNextValue();
x = setInterval(printNextValue, 1000);

Answer 3

Here is some sample Javascript code to show one image name every second

var arr = [
    "1stopradio859com.png",
    "officialslimmcom.png",
    "thelabcommunityfoundationorg.png",
    "officialmichaelwyattcom.png"
];

var counter = 0;

window.setInterval( function() {
    console.log( arr[ counter++ % arr.length ] );
}, 1000 );