Самый быстрый способ получить информацию из массива и отобразить в формате HTML

Question

Я создаю приложение в html5 для мобильных устройств, и у меня есть вся информация об элементах в массиве с 887 записями.Каждая запись имеет 32 ключа со значениями, некоторые с более чем одним значением.

Я использую цикл for для итерации массива, и когда я нахожу запись, соответствующую элементу html, она показывает информацию об элементе сБлок html.

Я обнаружил, что более эффективно кэшировать массив, используемый в цикле for.Поэтому вместо этого:

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

Я делаю это более быстро:

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

Еще одна идея, которую я протестировал, - это создание индекса длямассив, чтобы избежать циклов, как это:

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
}

А затем вызвать информацию об элементе с помощью функции, подобной этой:

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)
}

Поэтому, когда я использую код, подобный этому: <div class="item watermelon"></div>он должен получить информацию об элементе без необходимости циклически проходить по массиву.

Ниже приведен пример кода, который я написал для представления ситуации, с коротким массивом элементов.В реальном приложении основной массив, содержащий информацию об элементах, имеет длину 887 элементов.И я делаю некоторые циклы for внутри другого цикла for для получения информации, такой как stats и пример used in.

Итак, это цикл for внутри цикла for.

Вопросесть более эффективный способ сделать это?Потому что некоторые страницы, которые отображают одну категорию элементов, приблизительно с 100 элементами, занимают 5, 6 секунд, чтобы загрузить, и мне нужно, чтобы это было быстрее.

Редактировать: Codepen код, который показывает время выполнения с обоими кодами:

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

Это сравнение между filter , map or find, for, $.each и reduce.В коде измените map to filter or find, чтобы увидеть разницу.Для find код здесь https://jsfiddle.net/ibrth/3awoj1b9/3/

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
}

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": "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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"
  },

  {
    "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 used to create the index of the items

//createindex();

function gen(){
  var allitems = "";
  array.reduce((i, item) =>{
 
    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);
}

var currentDates = array.filter(function(obj) {
  return obj;
});

function gen2(){
  array.reduce((j, item) =>{

    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>';
    }

    $('.allitems .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>')
  });
}


function gen3(){
  var allitems = "";
  array.reduce((i, item) =>{
 
    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 gen4(){
  array.reduce((j, item) =>{

    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>';
    }

    $('.allitems .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>')
  });
}

function gen6(){
  var allitems = "";
  array.map(( item) =>{
 
    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);
}

var currentDates = array.filter(function(obj) {
  return obj;
});

function gen7(){
  array.map(( item) =>{

    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>';
    }

    $('.allitems .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>')
  });
}


function gen8(){
  var allitems = "";
  
 

// This is a function of current date, so will be empty at some point.


$.each(array, function(i, item) {
   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 gen9(){
  $.each(array, function(j, item) {
   
    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>')
  });
}

var t0 = performance.now();
$('.allitems').each(function() {
  gen();
  gen2()
});
var t1 = performance.now();
var milliseconds = (t1 - t0);
var seconds = (milliseconds / 1000).toFixed(6);
var method = "Using  reduce  ";
$('.function_time_1').html("Using reduce " + seconds + " seconds.")
console.log("%c "+method+" took " + seconds + " seconds.", 'background: #000; color: #89ff00');

var t2 = performance.now();
$('.individual_items').each(function() {
  gen8();
  gen9()
});

var t3 = performance.now();
var milliseconds2 = (t3 - t2);
var seconds2 = (milliseconds2 / 1000).toFixed(6);
var method = "Using each without looping";
$('.function_time_2').html("Using each without looping took " + seconds2 + " seconds.");
console.log("%c "+method+" took " + seconds2 + " seconds.", 'background: #000; color: #89ff00');


var t4 = performance.now();
$('.allitems').each(function() {
  gen3();
  gen4()
});
var t5 = performance.now();
var milliseconds4 = (t5 - t4);
 var seconds4 = (milliseconds4 / 1000).toFixed(6);
var method5 = "Using for loops ";
$('.function_time_3').html("Using for loops   " + seconds4 + " seconds.")
console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00');


 t4 = performance.now();
$('.allitems').each(function() {
  gen6();
  gen7()
});
 t5 = performance.now();
 milliseconds4 = (t5 - t4);
  seconds4 = (milliseconds4 / 1000).toFixed(6);
 method5 = "Using filter ";
$('.function_time_4').html("Using filter   " + seconds4 + " seconds.")
console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00');

.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;
}
.debug {
  background-color: #000;
  font-family: consolas;
  color: #ffed00;
  font-size: 13px;
}
.debug div {
  padding: 5px;
}
.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.2.1/jquery.min.js"></script>
<div class="debug">
  <div class="function_time_1"></div>
  <div class="function_time_2"></div>
  <div class="function_time_3"></div>
  <div class="function_time_4"></div>
</div>

<div class="totalitems">
  <span class="total_txt">Total items:</span>
  <span class="total"></span>
</div>
<div class="allitems"></div>

<div class="individual_items">
  <div class="item strawberry"></div>
  <div class="item pear"></div>
  <div class="item orange"></div>
  <div class="item watermelon"></div>
  <div class="item fruit_salad"></div>
  <div class="item water"></div>
  <div class="item orange_juice"></div>
  <div class="item pear_juice"></div>
  <div class="item strawberry_juice"></div>
  <div class="item watermelon_juice"></div>
  <div class="item potato"></div>
  <div class="item french_fries"></div>
</div>