Fastest way to retrieve information from array and display in html

Question

I am creating an app in html5 for mobile, and I have all the information of the items inside an array with 887 entries. Each entry have 32 key with values, some with more than one value.

I am using a for loop to iterate the array, and when I find the entry that match the html element it shows the item information with a html block.

I found that it's more efficient to cache the array lenght to use in the for loop. So instead of doing this:

for (var i = 0; i < array.length; i++){//code};

I am doing this which is more fast:

var array_len = array.length;
for (var i = 0; i < array_len; i++){//code};

Another idea that I tested is creating an index for the array to avoid loops, like this:

var index = {
  "strawberry": 0,
  "pear": 1,
  "orange": 2,
  "watermelon": 3,
  "fruit_salad": 4,
  "water": 5,
  "orange_juice": 6,
  "pear_juice": 7,
  "strawberry_juice": 8,
  "watermelon_juice": 9,
  "potato": 10,
  "french_fries": 11
}

And then call the item info using a function like this:

var singleItem = $('.item');
singleItem.each(function() {
  var item = $(this).attr('class').split(' ')[1];
  var n = index[item];
  var a_items = array[n];
$(this).html(CODE DO DISPLAY THE ITEM INFORMATION HERE)
}

So when I use a code like this: <div class="item watermelon"></div> it should retrieve the item information without the need to loop through the array.

Below is an example code I wrote to represent the situation, with a short array of items. In the real app, the main array which holds the items information is 887 items long. And I do some for loops inside the other for loop to retrieve informations like stats and the used in example.

So, it's a for loop inside a for loop.

The question is, there's a more efficient way of doing this? Because some pages that display one category of items, with aproximatedely 100 items taks 5, 6 seconds to load, and I need it to be more faster.

Edit: Codepen code that shows performance time with both codes:

https://codepen.io/anon/pen/YBVjKV

// icons: https://www.flaticon.com/search/2?word=food&style_id=28
var array = [
  {
    "name": "strawberry",
    "price": "2.00",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"2"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["strawberry_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135717.png"
  },
  {
    "name": "pear",
    "price": "1.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["pear_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167260.png"
  },
  {
    "name": "orange",
    "price": "0.80",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"6"},
      {"type":"thirst","val":"5"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415734.png"
  },
  {
    "name": "watermelon",
    "price": "5.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-6"}
    ],
    "used_in":["watermelon_juice","fruit_salad"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415731.png"
  },
  {
    "name": "fruit_salad",
    "price": "6.50",
    "type": "fruit",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"3"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["strawberry","pear","orange","watermelon"],
    "icon": "https://image.flaticon.com/icons/png/128/415/415744.png"
  },
  {
    "name": "water",
    "price": "1.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"8"},
      {"type":"bladder","val":"-3"}
    ],
    "used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135662.png"
  },
  {
    "name": "orange_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["orange","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167612.png"
  },
  {
    "name": "pear_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["pear","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167623.png"
  },
  {
    "name": "strawberry_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients":["strawberry","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167254.png"
  },
  {
    "name": "watermelon_juice",
    "price": "6.50",
    "type": "drink",
    "stats": [
      {"type":"thirst","val":"6"},
      {"type":"bladder","val":"-3"}
    ],
    "ingredients":["watermelon","water"],
    "icon": "https://image.flaticon.com/icons/png/128/167/167620.png"
  },
  {
    "name": "potato",
    "price": "1.00",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"4"},
      {"type":"bladder","val":"-2"}
    ],
    "used_in":["french_fries"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135676.png"
  },

  {
    "name": "french_fries",
    "price": "3.50",
    "type": "food",
    "stats": [
      {"type":"hunger","val":"10"},
      {"type":"thirst","val":"-4"},
      {"type":"bladder","val":"-2"}
    ],
    "ingredients": ["potato"],
    "icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  }


]

var array_len = array.length;
function gen(){
  var allitems = "";
  for (var i = 0; i < array_len; i++){
    var item = array[i];
    var name = item.name;
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    allitems += '<div class="item '+name+'"></div>';
  }
  $('.total').html(array_len);
  $('.allitems').html(allitems);
}

function gen2(){
  for (var j = 0; j < array_len; j++){
    var item = array[j];
    var name = item.name;
    var formatted_name = name.replace(/_/g,' ');
    var price = item.price;
    var type = item.type;
    var icon = item.icon;
    var ing = item.ingredients;
    var used_in = item.used_in;
    var stats = item.stats;
    var stats_info = "";
    var ingredients = "";
    var used = "";
    var stat_item = "";
    if(stats != undefined){
      for(var s in stats){
        var stat = stats[s];
        var type = stat.type;
        var val = stat.val
        stat_item += '<div class="stat">'+
          '<i class="'+type+'"></i>'+
          '<span class="stat_val">'+val+'</span>'+
          '</div>'
      }
      stats_info = '<div class="stats_info">'+
        stat_item+
        '</div>';
    }
    for(var i in ing){
      var ing_item = ing[i];
      var format_ing = ing_item.replace(/_/g,' ');
      ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    for(var k in used_in){
      var ing_item = used_in[k];
      var format_ing = ing_item.replace(/_/g,' ');
      used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+
        '<span class="ing_txt">'+format_ing+'</span>'+
        '</div>';
    }
    var ing_block = "";
    if(ing != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="ingredient_txt">Uses:</div>'+
        ingredients+
        '</div>';
    }
    if(used_in != undefined){
      ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';
    }

    $('.item.'+name).html
    ('<div class="items">'+
     '<div class="itemblock">'+
     '<i class="'+name+'"></i>'+
     '<span class="name">'+formatted_name+'</span>'+
     '<span class="price">$ '+price+'</span>'+
     '<span class="type">'+type+'</span>'+
     '</div>'+
     stats_info+
     ing_block+
     '</div>')
  }
}
gen()
gen2()

.strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);}
.pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);}
.orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);}
.watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);}
.fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);}
.water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);}
.pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);}
.strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);}
.watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);}
.potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);}
.french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);}
.hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);}
.thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);}

body {
  background-color: #a3d5d3;
  font-family: arial;
}
.totalitems {
  display: block;
  background: #131313;
  color: #fff;
  margin-bottom: 2px;
  text-align: center;
}
.totalitems .total_txt {
  margin: 5px;
  display: inline-block;
}
.allitems {
  display: block;
}
.item {
  display: inline-block;
  margin-right: 2px;
  box-sizing: border-box;
  background-image: none;
  vertical-align: top;
  width: 320px;
}
.items {
  border: 1px solid #000;
  margin-bottom: 2px;
  background-color: #000;
  padding: 1px;
}
.itemblock {
  display: flex;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
  min-height: 40px;
}
.itemblock .items {
  display: block;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
}
.itemblock i{
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  align-items: center;
  flex-shrink: 0;
  margin: 2px;
}
.itemblock .name {
  display: flex;
  align-items: center;
  margin: 0 5px 0 5px;
  text-transform: capitalize;
  color: #fff;
  width: 100px;
  flex-shrink: 0;
}
.itemblock .price {
  display: flex;
  align-items: center;
  margin: 0 2px;
  color: #ffc107;
  width: 50px;
  flex-shrink: 0;
}
.itemblock .type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 15px;
  color: #9E9E9E;
  text-transform: capitalize;
  flex-shrink: 0;
}
.stats_info {
  display: flex;
  background-color: #333;
  padding: 8px;
  justify-content: center;
  border-bottom: 2px solid #000;
}
.stats_info .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
.stats_info .stat i {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.stats_info .stat .stat_val {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
  text-transform: capitalize;
  justify-content: center;
}
.ingredients_block {
  display: block;
  background-color: #333;
  padding: 5px;
  text-align: center;
  min-height: 82px;
}
.ingredients_block .usedngredient_txt,
.ingredients_block .ingredient_txt{
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 12px;
  text-align: left;
}
.ingredients_block .ingredient {
  display: inline-block;
  align-items: center;
  width: 75px;
}
.ingredients_block .ingredient i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.ingredients_block .ingredient .ing_txt {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  text-transform: capitalize;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>
<!-- SEE THIS CODE IN FULL PAGE FOR BETTER VISUALIZATION -->

Answer 1

There're a lot of things you write them better, In my answer I'll write some of them.

Template Literals

In ES6 you can use template literals in code meaning:

Don't

ing_block = '<div class="ingredients_block">'+
        '<div class="usedngredient_txt">Used in:</div>'+
        used+
        '</div>';

'<i class="'+name+'"></i>'

Do

ing_block = `<div class="ingredients_block">
        <div class="usedngredient_txt">Used in:</div>
        used</div>`;

`<i class="${name}"></i>`

If Condition and Conditional (ternary) operator

1. Don't compare with undefined simply you can write this if(used_in) instead of this if(used_in != undefined).
2. You can use ternary operator.

const and let instead of var

you can use const if your variable won't change through your app, and let if it'll change.

Destructuring assignment

Simply you can do this:

const {price, type, icon} = item;

instead of this

var price = item.price;
var type = item.type;
var icon = item.icon;

You also can iterate through your array using map instead of for loop.

Object.keys instead of For in

You can use Object.keys which is more efficient than iterating using for in. Source

Answer 2

Don't add markup via innerHTML

The reason for the slow down is not looking up the items but rather your method of creating the HTML.

Adding markup to the page via the innerHTML property is VERY slow. You should never add content that way.

Add content to a document fragment. When all the content has been created then add it to the page.

To help, create functions to approximate the declarative style of a HTML document.

In the example I create two helper functions.

• tag(type, properties) that creates an element adds properties and returns it.
• append(element, siblings) Appends children to the element. Importantly returning the parent element so that the call can be nested

To help the declarative style the second and above arguments of append are indented one extra step.

Example indentation

const createStats = stats =>
  stats.map(stat => 
    append(                                  // appends sid1, 2 to parent
      tag("div", {className: "stat"}),       // parent
        tag("span", {className: stat.type}), // sibling 1
        tag("span", {className: "stat_val"}) // sibling 2
    )
  );

Adding content this way will give a noticeable performance increase.

The code formatting for the example stuffed up and If I use the one in the editor it makes a total mess of it so will have to make do with it in at least a readable format.

const query = str => document.querySelector(str);
const tag = (type, props = {}) => Object.assign(document.createElement(type), props);
const append = (el, ...sibs) => (sibs.forEach(sib => el.appendChild(sib)), el);

// timeout just so that the array is parsed without needing to be at the top
setTimeout(()=>gen(array));

const createStats = stats =>
  stats.map(stat => 
    append(
      tag("div", {className: "stat"}),
        tag("i", {className: stat.type}),
        tag("span", {className: "stat_val", textContent: stat.val})
    )
  );
const createIngredients = ingredients =>
  ingredients.map(ingredient => 
    append(
      tag("div", {className: "ingredient"}),
        tag("i", {className: ingredient}),
        tag("span", {className: "ing_txt", textContent: ingredient.replace(/_/g,' ')})
    )
  );
const createItem = item => {
  var extras = [];
  if(item.stats){
    extras.push(append(
      tag("div",{className: "stats_info"}),
        ...createStats(item.stats)
    ));
  }
  if(item.ingredients) {
    extras.push(append(
      tag("div", {className:"ingredients_block"}),
        tag("div", {className:"ingredient_txt", textContent:"Uses:"}),
        ...createIngredients(item.ingredients)
    ));
  }     
  if(item.used_in) {
    extras.push(append(
      tag("div", {className:"ingredients_block"}),
        tag("div", {className:"usedngredient_txt", textContent:"Used in:"}),
        ...createIngredients(item.used_in)
    ));
  }
  return append(
    tag("div", {className:"items"}),
      append(
        tag("div", {className:"itemblock"}),
          tag("i", {className: item.name}),
          tag("span", {className: "name", textContent : item.name.replace(/_/g,' ')}),
          tag("span", {className: "price", textContent : "$" + item.price}),
          tag("span", {className: "type", textContent : item.type})
      ),
      ...extras
  );    
}
function gen(array){
  append(
    query(".allitems"),
      append(
        document.createDocumentFragment(), 
          ...array.map(item => append(
              tag("div",{className: "item " + item.name}),
                createItem(item)
          )
        )
     )
  )
  query(".total").textContent = array.length;
}




var array = [
  {
"name": "strawberry",
"price": "2.00",
"type": "fruit",
"stats": [
  {"type":"hunger","val":"4"},
  {"type":"thirst","val":"2"},
  {"type":"bladder","val":"-2"}
],
"used_in":["strawberry_juice","fruit_salad"],
"icon": "https://image.flaticon.com/icons/png/128/135/135717.png"
  },
  {
"name": "pear",
"price": "1.50",
"type": "fruit",
"stats": [
  {"type":"hunger","val":"6"},
  {"type":"thirst","val":"4"},
  {"type":"bladder","val":"-2"}
],
"used_in":["pear_juice","fruit_salad"],
"icon": "https://image.flaticon.com/icons/png/128/167/167260.png"
  },
  {
"name": "orange",
"price": "0.80",
"type": "fruit",
"stats": [
  {"type":"hunger","val":"6"},
  {"type":"thirst","val":"5"},
  {"type":"bladder","val":"-3"}
],
"used_in":["orange_juice","fruit_salad"],
"icon": "https://image.flaticon.com/icons/png/128/415/415734.png"
  },
  {
"name": "watermelon",
"price": "5.50",
"type": "fruit",
"stats": [
  {"type":"hunger","val":"4"},
  {"type":"thirst","val":"8"},
  {"type":"bladder","val":"-6"}
],
"used_in":["watermelon_juice","fruit_salad"],
"icon": "https://image.flaticon.com/icons/png/128/415/415731.png"
  },
  {
"name": "fruit_salad",
"price": "6.50",
"type": "fruit",
"stats": [
  {"type":"hunger","val":"10"},
  {"type":"thirst","val":"3"},
  {"type":"bladder","val":"-2"}
],
"ingredients": ["strawberry","pear","orange","watermelon"],
"icon": "https://image.flaticon.com/icons/png/128/415/415744.png"
  },
  {
"name": "water",
"price": "1.50",
"type": "drink",
"stats": [
  {"type":"thirst","val":"8"},
  {"type":"bladder","val":"-3"}
],
"used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"],
"icon": "https://image.flaticon.com/icons/png/128/135/135662.png"
  },
  {
"name": "orange_juice",
"price": "6.50",
"type": "drink",
"stats": [
  {"type":"thirst","val":"6"},
  {"type":"bladder","val":"-2"}
],
"ingredients":["orange","water"],
"icon": "https://image.flaticon.com/icons/png/128/167/167612.png"
  },
  {
"name": "pear_juice",
"price": "6.50",
"type": "drink",
"stats": [
  {"type":"thirst","val":"6"},
  {"type":"bladder","val":"-2"}
],
"ingredients":["pear","water"],
"icon": "https://image.flaticon.com/icons/png/128/167/167623.png"
  },
  {
"name": "strawberry_juice",
"price": "6.50",
"type": "drink",
"stats": [
  {"type":"thirst","val":"4"},
  {"type":"bladder","val":"-2"}
],
"ingredients":["strawberry","water"],
"icon": "https://image.flaticon.com/icons/png/128/167/167254.png"
  },
  {
"name": "watermelon_juice",
"price": "6.50",
"type": "drink",
"stats": [
  {"type":"thirst","val":"6"},
  {"type":"bladder","val":"-3"}
],
"ingredients":["watermelon","water"],
"icon": "https://image.flaticon.com/icons/png/128/167/167620.png"
  },
  {
"name": "potato",
"price": "1.00",
"type": "food",
"stats": [
  {"type":"hunger","val":"4"},
  {"type":"bladder","val":"-2"}
],
"used_in":["french_fries"],
"icon": "https://image.flaticon.com/icons/png/128/135/135676.png"
  },
  {
"name": "french_fries",
"price": "3.50",
"type": "food",
"stats": [
  {"type":"hunger","val":"10"},
  {"type":"thirst","val":"-4"},
  {"type":"bladder","val":"-2"}
],
"ingredients": ["potato"],
"icon": "https://image.flaticon.com/icons/png/128/135/135589.png"
  }
]

.strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);}
.pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);}
.orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);}
.watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);}
.fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);}
.water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);}
.pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);}
.strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);}
.watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);}
.potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);}
.french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);}
.hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);}
.thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);}
.bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);}

body {
  background-color: #a3d5d3;
  font-family: arial;
}
.totalitems {
  display: block;
  background: #131313;
  color: #fff;
  margin-bottom: 2px;
  text-align: center;
}
.totalitems .total_txt {
  margin: 5px;
  display: inline-block;
}
.allitems {
  display: block;
}
.item {
  display: inline-block;
  margin-right: 2px;
  box-sizing: border-box;
  background-image: none;
  vertical-align: top;
  width: 320px;
}
.items {
  border: 1px solid #000;
  margin-bottom: 2px;
  background-color: #000;
  padding: 1px;
}
.itemblock {
  display: flex;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
  min-height: 40px;
}
.itemblock .items {
  display: block;
  background-color: #333;
  padding: 5px;
  margin-bottom: 2px;
}
.itemblock i{
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  align-items: center;
  flex-shrink: 0;
  margin: 2px;
}
.itemblock .name {
  display: flex;
  align-items: center;
  margin: 0 5px 0 5px;
  text-transform: capitalize;
  color: #fff;
  width: 100px;
  flex-shrink: 0;
}
.itemblock .price {
  display: flex;
  align-items: center;
  margin: 0 2px;
  color: #ffc107;
  width: 50px;
  flex-shrink: 0;
}
.itemblock .type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 15px;
  color: #9E9E9E;
  text-transform: capitalize;
  flex-shrink: 0;
}
.stats_info {
  display: flex;
  background-color: #333;
  padding: 8px;
  justify-content: center;
  border-bottom: 2px solid #000;
}
.stats_info .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}
.stats_info .stat i {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.stats_info .stat .stat_val {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
  text-transform: capitalize;
  justify-content: center;
}
.ingredients_block {
  display: block;
  background-color: #333;
  padding: 5px;
  text-align: center;
  min-height: 82px;
}
.ingredients_block .usedngredient_txt,
.ingredients_block .ingredient_txt{
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 12px;
  text-align: left;
}
.ingredients_block .ingredient {
  display: inline-block;
  align-items: center;
  width: 75px;
}
.ingredients_block .ingredient i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
}
.ingredients_block .ingredient .ing_txt {
  display: flex;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  text-transform: capitalize;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>
<!-- SEE THIS CODE IN FULL PAGE FOR BETTER VISUALIZATION -->