dynamic bootstrap carousel items

Question

How can loop and create dynamic bootstrap carousel items?

this the json:

"pro": {
            "52": {
              "product_id": "52",
              "category_id": "109",
              "name": "Morder Rock Double 3"
            },
            "54": {
              "product_id": "54",
              "category_id": "109",
              "name": "Morder Rock Double 5"
            },
            "57": {
              "product_id": "57",
              "category_id": "109",
              "name": "Morder Rock Double 8"
            },
            "59": {
              "product_id": "59",
              "category_id": "109",
              "name": "Morder Rock Double 10"
            },
            "61": {
              "product_id": "61",
              "category_id": "109",
              "name": "Mordern Single Cutaway 12"
            },
            "62": {
              "product_id": "62",
              "category_id": "109",
              "name": "Mordern Single Cutaway 13"
            }
}

This my code

var itemslist = '';
var product_Data ='';
itemslist += '<div class="item active"><div class="container"><div class="row">'
$.each(nvalue.pro, function (lkey, lvalue) {
    product_Data += '<div class="col-md-3">\n\
    ' + lvalue.name + '<img class="img-responsive" 
    src="image/product_images/1.jpg" alt="Los Angeles" /> \n\
    </div>';
});
itemslist += product_Data + '</div></div></div>';

I need it like this :

<div class="item active">
   <div class="container">
      <div class="row">
         <div class="col-md-3">
            Morder Rock Double 3<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 5<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 8<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 10<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>

      </div>
   </div>
</div>

<div class="item">
   <div class="container">
      <div class="row">
        <div class="col-md-3">
            Mordern Single Cutaway 12<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
        </div>
        <div class="col-md-3">
            Mordern Single Cutaway 13<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
        </div> 
      </div>
   </div>
</div>

Answer 1

You need to add an index that keeps track of how many elements you have added, and then close one slider element and open the next every fourth image.

I've added a variable i in the code below, and used modulus to check if it is a multiple of 4 to recognise when to do this.

  i % 4 

Modulus % divides the first number (in this case the variable i) by the following number, and returns the remainder.

You can then use this in an if statement, as if the modulus of a variable has no remainder, then it is exactly divisible by four, and therefore must be a multiple of four.

// Check every fourth
if ( i % 4 == 0) {

   ...

}

---

Demo

N.B. I've added some more JSON data to demonstrate that the code continues to work for large data sets.

var proJSON = {
  "pro": {
    "52": {
      "product_id": "52",
      "category_id": "109",
      "name": "Morder Rock Double 3"
    },
    "54": {
      "product_id": "54",
      "category_id": "109",
      "name": "Morder Rock Double 5"
    },
    "57": {
      "product_id": "57",
      "category_id": "109",
      "name": "Morder Rock Double 8"
    },
    "59": {
      "product_id": "59",
      "category_id": "109",
      "name": "Morder Rock Double 10"
    },
    "61": {
      "product_id": "61",
      "category_id": "109",
      "name": "Mordern Single Cutaway 12"
    },
    "62": {
      "product_id": "62",
      "category_id": "109",
      "name": "Mordern Single Cutaway 13"
    },
    "67": {
      "product_id": "57",
      "category_id": "109",
      "name": "Morder Rock Double 8"
    },
    "68": {
      "product_id": "59",
      "category_id": "109",
      "name": "Morder Rock Double 10"
    },
    "69": {
      "product_id": "61",
      "category_id": "109",
      "name": "Mordern Single Cutaway 12"
    },
    "71": {
      "product_id": "62",
      "category_id": "109",
      "name": "Mordern Single Cutaway 13"
    }
  }
};

var itemslist = '';
var product_Data ='';
itemslist += '<div class="item active"><div class="container"><div class="row">';

// Create index counter
var i = 1;

$.each(proJSON.pro, function (lkey, lvalue) {
    product_Data += '<div class="col-md-3">\n' + lvalue.name + '<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles" />\n</div>';


    // Check every fourth
    if ( i % 4 == 0) {
      // Close off tag (hr just for demo purposes)
      product_Data += '</div></div></div><hr>';
      // Add starting tags again
      product_Data += itemslist;
    }
    
    // Increment index counter
    i += 1;
    
});

itemslist += product_Data + '</div></div></div>';

$("#sliders").append(itemslist);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="sliders"></div>