Как разобраться с выводом объекта?

227

15 октября 2018, 02:40

Есть объект в котором будут отзывы, порядка 200 шт, их нужно фильтровать по номеру телефона и выводить на экран (в отзыве картинки, ссылки текста...)
С фильтрацией по номеру телефона я разобрался, вопрос с выводом

Как можно при загрузке выводить определенное кол-во отзывов, например 9 (сейчас вывожу все) и дальше по клику на кнопку подгружать остальные (например по 3)
Схожая ситуация после фильтрования, например после фильтрации получилось 50 нужных отзывов, а мне сразу нужно вывести только 9, а остальные по клику на кнопку подгружать

P.S. после фильтрации перед выводом я собираю блоки в скрытый div (мне кажется это не лучшее решение)

https://jsfiddle.net/hmdL1742/1/

// Отзывы 
const reviews = { 
  "+7 (000) 000-00-00": { 
    "name": "Снежанна Ноготок", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-instagram"></i>', 
    "social_network": "INSTAGRAM", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (111) 111-11-11": { 
    "name": "Снежанна Ноготок 1", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-facebook-f"></i>', 
    "social_network": "FACEBOOK", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (222) 222-22-22": { 
    "name": "Снежанна Ноготок 2", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-vk"></i>', 
    "social_network": "ВКОНТАКТЕ", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (333) 333-33-33": { 
    "name": "Снежанна Ноготок 3", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-instagram"></i>', 
    "social_network": "INSTAGRAM", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (444) 444-44-44": { 
    "name": "Снежанна Ноготок 4", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-facebook-f"></i>', 
    "social_network": "FACEBOOK", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (555) 555-55-55": { 
    "name": "Снежанна Ноготок 5", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-instagram"></i>', 
    "social_network": "INSTAGRAM", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (666) 666-66-66": { 
    "name": "Снежанна Ноготок 6", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-vk"></i>', 
    "social_network": "ВКОНТАКТЕ", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (777) 777-77-77": { 
    "name": "Снежанна Ноготок 7", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-instagram"></i>', 
    "social_network": "INSTAGRAM", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (888) 888-88-88": { 
    "name": "Снежанна Ноготок 8", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-facebook-f"></i>', 
    "social_network": "FACEBOOK", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
  "+7 (999) 999-99-99": { 
    "name": "Снежанна Ноготок 9", 
    "img_src": "http://via.placeholder.com/350x150", 
    "social_link": "https://vk.com/", 
    "social_icon": '<i class="fab fa-vk"></i>', 
    "social_network": "ВКОНТАКТЕ", 
    "title": "Спасибо вам за работу", 
    "text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, 					tempor sit " 
  }, 
}; 
 
// строка ввода запроса 
const searchReview = $('#searchReview'); 
// сюда добавляем отзывы 
const revOutput = $('#reviews') 
let rev = '' 
 
// Шаблон отзыва 
let reviewTemplate = `<div class="block"> 
	<div class="card"> 
		<img class="{{ img_class }}" src="{{ img_src }}" alt="{{ img_alt }}" class="avatar"> 
		<p class="name">{{ rev_name }}</p> 
		<a class="link" href="{{ social_link }}" target="_blank"> 
				{{ social_icon }} 
		    <span>{{ social_network }}</span> 
		</a> 
	</div> 
	<div class="text"> 
		<p class="title">{{ title }}</p> 
		<p class="rev_text">{{ text }}</p> 
	</div> 
</div>`; 
 
// Плейсхолдер в поле поиска 
(function typingInSearchField() { 
  $('div.search').on('focus', function() { 
    if ($(this).text().trim() === $(this).attr('title').trim()) { 
      $(this).html(''); 
    } 
  }).on('blur', function() { 
    if ($(this).text().length < 1) { 
      $(this).html($(this).attr('title')); 
 
      if ($(this).hasClass('searchCatalog')) { 
        initCatalog(); 
      } else if ($(this).hasClass('searchReview')) { 
        initReviews(); 
      } 
    } 
  }) 
}()); 
 
 
// Первый вывод отзывов 
function initReviews() { 
  $('.hid_reviews').html(''); 
  rev = ''; 
 
  for (let phone in reviews) { 
    if (typeof reviews[phone] !== 'undefined' || reviews[phone] !== null) { 
      rev += reviewTemplate 
        .replace("{{ rev_name }}", reviews[phone]["name"]) 
        .replace("{{ img_class }}", reviews[phone]["img_class"]) 
        .replace("{{ img_alt }}", reviews[phone]["imgAlt"]) 
        .replace("{{ title }}", reviews[phone]["title"]) 
        .replace("{{ text }}", reviews[phone]["text"]) 
        .replace("{{ social_link }}", reviews[phone]["social_link"] ? reviews[phone]["social_link"] : '') 
        .replace("{{ social_icon }}", reviews[phone]["social_icon"] ? reviews[phone]["social_icon"] : '<i class="fab fa-vk"></i>') 
        .replace("{{ social_network }}", reviews[phone]["social_network"] ? reviews[phone]["social_network"] : 'ВКОНТАКТЕ') 
        .replace("{{ img_src }}", reviews[phone]["img_src"]); 
 
      // Сбор блоков перед выводом 
      $('.hid_reviews').html(rev); 
    } 
  } 
  // Вывод блоков 
  $(revOutput).html($('.hid_reviews').html()); 
  $('.hid_reviews').html(''); 
}; 
initReviews() 
 
 
// Ввод в поле поиска и рендер Отзывов 
$(searchReview).on('input change keydown', function() { 
 
  const v = $(this).text().replace(/[^0-9]/gim, ''); 
  if (v.length < 2) return; 
 
  $('.hid_catalog').html(''); 
  let t = ''; 
 
  // Регулярка для удаления символов кроме цифр 
  //str.replace(/[^0-9]/gim,'') 
 
  for (let phone in reviews) { 
    if (!!~phone.replace(/[^0-9]/gim, '').indexOf(v)) { 
 
      t += reviewTemplate 
        .replace("{{ rev_name }}", reviews[phone]["name"]) 
        .replace("{{ img_class }}", reviews[phone]["img_class"]) 
        .replace("{{ img_alt }}", reviews[phone]["imgAlt"]) 
        .replace("{{ title }}", reviews[phone]["title"]) 
        .replace("{{ text }}", reviews[phone]["text"]) 
        .replace("{{ social_link }}", reviews[phone]["social_link"] ? reviews[phone]["social_link"] : '') 
        .replace("{{ social_icon }}", reviews[phone]["social_icon"] ? reviews[phone]["social_icon"] : '<i class="fab fa-vk"></i>') 
        .replace("{{ social_network }}", reviews[phone]["social_network"] ? reviews[phone]["social_network"] : 'ВКОНТАКТЕ') 
        .replace("{{ img_src }}", reviews[phone]["img_src"]); 
 
      // Сбор блоков перед выводом 
      $('.hid_reviews').html(t); 
    } 
  } 
  // Вывод блоков 
  $(revOutput).html($('.hid_reviews').html()); 
});

.search { 
  width: 100%; 
  margin: 0 auto; 
  margin-top: 0px; 
  margin-top: 35px; 
  box-shadow: 6px 10px 5px 1px rgba(1, 1, 1, .1); 
  border: 1px solid #f1b80b; 
  color: #7d7d7d; 
  font-size: 28px; 
  text-align: center; 
  min-height: 70px; 
  padding: 16px 10px; 
} 
 
#reviews { 
  flex-wrap: wrap; 
} 
 
#reviews, 
.block { 
  position: relative; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
} 
 
.block { 
  width: 360px; 
  border: 2px solid #ffb900; 
  padding: 20px 70px 20px 15px; 
  margin-top: 40px; 
  margin-left: 10px; 
  margin-right: 10px; 
} 
 
.block .card { 
  width: 90px; 
  position: relative; 
  flex-shrink: 0; 
  padding: 10px 8px 8px; 
  background: #fff; 
  text-align: center; 
  box-shadow: 4px 4px 9px 5px rgba(1, 1, 1, .07); 
  top: -45px; 
  margin-right: 12px; 
  margin-bottom: -40px; 
} 
 
.block .card img { 
  border-radius: 50%; 
  height: 90px; 
  width: 90px; 
} 
 
.block .card .name { 
  margin-top: 4px; 
  font-size: 12px; 
  line-height: 12px; 
} 
 
.block .card .link { 
  margin-top: 8px; 
  display: inline-block; 
  font-size: 8px; 
  white-space: nowrap; 
} 
 
.block .card .link i { 
  color: #ffb900; 
  font-size: 10px; 
} 
 
.block .card .link span { 
  text-decoration: underline; 
} 
 
.block .text { 
  text-align: left; 
  font-weight: 700; 
} 
 
.block .title { 
  color: #ffb900; 
  margin-bottom: 5px; 
  font-size: 14px; 
} 
 
.block .rev_text { 
  font-size: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div contenteditable="true" class="search searchReview" id="searchReview" title="Напишите номер сотового телефона подрядчика, что бы посмотреть отзывы"> 
  Напишите номер сотового телефона подрядчика, что бы посмотреть отзывы 
</div> 
 
<!-- Сюда грузятся отзывы --> 
<div id="reviews"></div> 
 
<!-- По клику хочу подгружать новые блоки --> 
<a href="#x" class="btn">ПОКАЗАТЬ ЕЩЕ</a> 
 
<!-- Здесь собираю блоки перед вставкой --> 
<div class="hid_reviews" style="display: none;"></div>