Untitled

function jsonData() {
     videoData()
     tagSearch()
     categoryHelpDocs()
}

// Display Videos Data 
function videoData() {
     let videos = ``;
     for ( let i = 0; i < myData.videos.length; i++ ) {
          videos += `
               <div class="item-video">
                                   <div class="card">
                                        <div class="play-icon">
                                             <svg width="69" height="69" viewBox="0 0 69 69" fill="none"
                                                  xmlns="http://www.w3.org/2000/svg">
                                                  <circle cx="34.5" cy="34.5001" r="32" fill="white" stroke="white" stroke-width="5" />
                                                  <path d="M45.4796 30.6678C48.8401 32.6112 48.8401 37.389 45.4796 39.3324L31.7047 47.2985C28.2965 49.2695 24 46.8536 24 42.9663V27.034C24 23.1466 28.2965 20.7307 31.7047 22.7017L45.4796 30.6678Z"
                                                       fill="#10109B" />
                                             </svg>
                                        </div>
                                        <div class="img-card">
                                             <a href="${ myData.videos[ i ].link }" target="_blank">
                                                  <p>Cancel an order and issue a refund</p>
                                                  <span class="timer">${ myData.videos[ i ].timer }</span>
                                             </a>
                                        </div>
                                        <div class="card-body">
                                             <h5 class="card-title">${ myData.videos[ i ].category }</h5>
                                             <p class="card-text">${ myData.videos[ i ].title }</p>
                                        </div>
                                        <div class="logo-card">
                                             <img src="https://d33v4339jhl8k0.cloudfront.net/docs/assets/615dbd213b68e531e60410a0/images/61606c4d12c07c18afddbb65/Logo.png" alt="logo video">
                                        </div>
                                   </div>
                              </div>
          `
     }
     return document.querySelector( ".videos .row" ).innerHTML = videos;
}


// Display Tag Search Data 
function tagSearch() {
     let tagSearch = ``;
     for ( let i = 0; i < myData.tagSearch.length; i++ ) {
          tagSearch += `
                    <li> ${ myData.tagSearch[ i ] }</li>
                    `

     }
     return document.querySelector( ".suggestion-search .suggestion" ).innerHTML = tagSearch;
}


// Display Category Help Docs
function categoryHelpDocs() {
     let categoey = ``;
     for ( let i = 0; i < myData.helpDocs.length; i++ ) {
          categoey += `
               <div class="item-content ">
                    <span class="item-icon">
                         <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <rect x="2.5" y="5.00012" width="25" height="20" rx="3"
                              fill="url(#paint0_linear)" />
                              <rect x="2.5" y="5.00012" width="25" height="20" rx="3" fill="#10109B" />
                              <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M27.5 12.5001H2.5V10.0001H27.5V12.5001Z"
                              fill="url(#paint1_linear)" />
                              <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M27.5 12.5001H2.5V10.0001H27.5V12.5001Z" fill="#FC7FFC" />
                              <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5 18.7501C5 18.0598 5.55964 17.5001 6.25 17.5001H13.75C14.4404 17.5001 15 18.0598 15 18.7501C15 19.4405 14.4404 20.0001 13.75 20.0001H6.25C5.55964 20.0001 5 19.4405 5 18.7501Z"
                              fill="url(#paint2_linear)" />
                              <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M5 18.7501C5 18.0598 5.55964 17.5001 6.25 17.5001H13.75C14.4404 17.5001 15 18.0598 15 18.7501C15 19.4405 14.4404 20.0001 13.75 20.0001H6.25C5.55964 20.0001 5 19.4405 5 18.7501Z"
                              fill="#FC7FFC" />
                              <defs>
                              <linearGradient id="paint0_linear" x1="15" y1="5.00012" x2="15"
                              y2="25.0001" gradientUnits="userSpaceOnUse">
                              <stop stop-color="#0895F2" />
                              <stop offset="1" stop-color="#1266DE" />
                              </linearGradient>
                              <linearGradient id="paint1_linear" x1="15" y1="10.0001" x2="15"
                              y2="12.5001" gradientUnits="userSpaceOnUse">
                              <stop stop-color="#FF63CD" />
                              <stop offset="1" stop-color="#F141CA" />
                              </linearGradient>
                              <linearGradient id="paint2_linear" x1="10" y1="17.5001" x2="10"
                              y2="20.0001" gradientUnits="userSpaceOnUse">
                              <stop stop-color="#FF63CD" />
                              <stop offset="1" stop-color="#F141CA" />
                              </linearGradient>
                              </defs>
                         </svg>
                    </span>
                    <h3 class="item-title">
                         ${ myData.helpDocs[ i ].category }
                    </h3>
                    <ul class="item-links">
                         <li><a href="${ myData.helpDocs[ i ].articles[ 0 ].link }" target="_blank">${ myData.helpDocs[ i ].articles[ 0 ].title }</a></li>
                         <li><a href="${ myData.helpDocs[ i ].articles[ 1 ].link }" target="_blank">${ myData.helpDocs[ i ].articles[ 1 ].title }</a></li>
                         <li><a href="${ myData.helpDocs[ i ].articles[ 2 ].link }" target="_blank">${ myData.helpDocs[ i ].articles[ 2 ].title }</a></li>
                         <li><a href="${ myData.helpDocs[ i ].articles[ 3 ].link }" target="_blank">${ myData.helpDocs[ i ].articles[ 3 ].title }</a></li>
                         <li><a href="${ myData.helpDocs[ i ].articles[ 4 ].link }" target="_blank">${ myData.helpDocs[ i ].articles[ 4 ].title }</a></li>

                         <a class="more" href="#">
                              <span>View All</span>
                              <svg width="6" height="10" viewBox="0 0 6 10" fill="none"
                                   xmlns="http://www.w3.org/2000/svg">
                                   <path fill-rule="evenodd" clip-rule="evenodd"
                                   d="M0.361766 9.80486C0.101417 9.54451 0.101416 9.1224 0.361766 8.86205L4.22369 5.00012L0.361766 1.13819C0.101416 0.877844 0.101416 0.455733 0.361766 0.195384C0.622115 -0.0649662 1.04423 -0.0649662 1.30457 0.195384L5.1665 4.05731C5.6872 4.57801 5.6872 5.42223 5.1665 5.94293L1.30457 9.80486C1.04423 10.0652 0.622115 10.0652 0.361766 9.80486Z"
                                   fill="#E164AF" />
                              </svg>
                         </a>
                    </ul>
               </div>
          `
     }
     return document.querySelector( ".row.content" ).innerHTML = categoey;
}