Filter Render Search

.map render

.map

•         function renderingList () {
              const markup = dataForSearch.map(({ name, descr }) => `
                  <li>${name}descr: ${descr}</li>
              `).join("");
              list.innerHTML = markup;
          }
      
          function renderingList () {
              const markup = dataForSearch.map(({ name, descr }) => {
                  return `<li>${name}descr: ${descr}</li>`
              }).join("");
              list.innerHTML = markup;;
          }

Filter search

    searchInput.addEventListener("input", _.debounce((event) => {
        const value1 = event.target.value;
        const filterItems = dataForSearch.filter(item => {
            const {name} = item;
            return name.includes(value1);
        });
        const markup = filterItems.map(({ name, descr })=> `
            <li>${name}descr: ${descr}</li>
        `).join("");
        filterList.innerHTML = markup;
      }, 300) 
    );

Filter result

.reduce render

.reduce

•         btnReduce.addEventListener("click", ()=> {
              const markup = reduceMarkup ();
              reduceList.innerHTML = markup;
              //reduceList.insertAdjacentHTML("beforeend", markup);
          });
          
          function reduceMarkup () {
              return dataForSearch.reduce((acc, { name, descr }) => {
                  return acc += `
                  <li>${name}descr: ${descr}</li>
                  `
              }, "");
          }

.forEach render

.forEach

•     dataForSearch.forEach(({ name, descr }) => markup.push(`
          <li>${name}descr: ${descr}</li>`));