Populate data from an object using the setInterval method in jQuery

Question

I am trying to populate a <span> tag with data coming from an object I've defined. The data needs to change (fadeIn/fadeOut) every X amount of seconds, which I've set in the setInterval method.

I am not able to get the desired outcome, please see my code so far below and let me know what the best way to think about this to get my outcome?

The outcome should be as described below:

On load: fadeIn: DISCOVER / MORE / EXTRA LINE

After 2000ms: fadeOut: the previous line, fadeIn: LOREM IPSUM / NEW GROUNDS

After 2000ms: fadeOut: the previous line, fadeIn: 10 LUXURY / PLANES FOR / HIRE

I was thinking of using setting a variable called 'count' to 0 then in the setInterval method increase the the count by 1 to change the text to the next set of data in the array.

NOTE: The '/' denotes the next line

$(document).ready(function() {

  $('.slideTitle span').hide();

  var imgObj = {
    "slideData": [{
      "slideHeading1": "DISCOVER",
      "slideHeading2": "MORE",
      "slideHeading3": "Extra Line",
    }, {
      "slideHeading1": "LOREM IPSUM",
      "slideHeading2": "NEW GROUNDS",
      "slideHeading3": "",
    }, {
      "slideHeading1": "10 LUXURY",
      "slideHeading2": "PLANES FOR",
      "slideHeading3": "HIRE",
    }]
  };

  $.each(imgObj, function(key, data) {
    $('.slideTitle .heading-1').append(data[0].slideHeading1);
    $('.slideTitle .heading-2').append(data[0].slideHeading2);
    $('.slideTitle .heading-3').append(data[0].slideHeading3);
  });

  $(function() {
    $('span.heading-1').fadeIn();
    $('span.heading-2').fadeIn();
    $('span.heading-3').fadeIn();
    setInterval(function() {
      // code to change the text to the next array in the object
      // i.e. next text that should fade in will be LOREM IPSUM / NEW GROUNDS
    }, 2000);
  });
});

.slideTitle {
  font-size: 22px;
  color: #333;
}

.slideTitle span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <!-- line 1 -->
  <span class="heading-2"></span>
  <!-- line 2 -->
  <span class="heading-3"></span>
  <!-- line 3 -->
</h2>

Answer 1

If you want to do it manually you can do something like that: The key is to not forget to wrap so that it's value goes like this: 0, 1, 2, 0, 1, 2, ...

that's done by using the modulo operator : count = (count + 1) % size_of_your_data

$(document).ready(function() {

  $('.slideTitle span').hide();

  var imgObj = {
    "slideData": [{
      "slideHeading1": "DISCOVER",
      "slideHeading2": "MORE",
      "slideHeading3": "Extra Line",
    }, {
      "slideHeading1": "LOREM IPSUM",
      "slideHeading2": "NEW GROUNDS",
      "slideHeading3": "",
    }, {
      "slideHeading1": "10 LUXURY",
      "slideHeading2": "PLANES FOR",
      "slideHeading3": "HIRE",
    }]
  };

  $.each(imgObj, function(key, data) {
    $('.slideTitle .heading-1').append(data[0].slideHeading1);
    $('.slideTitle .heading-2').append(data[0].slideHeading2);
    $('.slideTitle .heading-3').append(data[0].slideHeading3);
  });

  $(function() {
    $('span.heading-1').fadeIn();
    $('span.heading-2').fadeIn();
    $('span.heading-3').fadeIn();
    
    let count = 0;
    setInterval(function() {
      count = (count + 1) % imgObj.slideData.length;
      const newData = imgObj.slideData[count];
      $('span.heading-1').text(newData.slideHeading1).fadeIn();
      $('span.heading-2').text(newData.slideHeading2).fadeIn();
      $('span.heading-3').text(newData.slideHeading3).fadeIn();
    }, 2000);
  });
});

.slideTitle {
  font-size: 22px;
  color: #333;
}

.slideTitle span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <!-- line 1 -->
  <span class="heading-2"></span>
  <!-- line 2 -->
  <span class="heading-3"></span>
  <!-- line 3 -->
</h2>