CODEWITHSUNDEEP
javascriptfetch-api
Ullest
Ullest

Reputation: 11

Fetch api in javascripts

So i am creating a javascript searchbar that uses a fetch command to fetch data from a server. This server is not my own and i just used it as a template. This script works fine.But what i want to do is replace the fetch api with my own

Demonstation of code

const userCardTemplate = document.querySelector("[data-user-template]")
    const categoriesSearch = document.querySelector("[data-user-cards-container]")
    const searchInput = document.querySelector("[data-search]")
    
    let users = []

    searchInput.addEventListener("input", e => {
      const value = e.target.value.toLowerCase()
      users.forEach(user => {
        const isVisible = 
        user.name.toLowerCase().includes(value) ||
        user.email.toLowerCase().includes(value)
      user.element.classList.toggle("hide", !isVisible)
      })
    })
    
    fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(data => {
      users = data.map(user => {
        const card = userCardTemplate.content.cloneNode(true).children[0]
        const header = card.querySelector("[data-header]")
        const body = card.querySelector("[data-body]")
        header.textContent = user.name
        body.textContent = user.email
        categoriesSearch.append(card)
        return { name: user.name, email: user.email, element: card}
      })
    })

I think ive made my own fetch api via github which follows.

https://gist.github.com/UllestReal/09ca3d968dda94535e8fc25b998a6ce5#file-gistfile1-txt

But when i replace the first template api with my own, it wont fetch the code. Can someone tell me what im doing wrong?

I just wrote everything in one go it was alot easier. Just look above for my entire problem

Upvotes: 0

Views: 72

Answers (2)

Konrad
Konrad

Reputation: 24681

  1. Go to the link you pasted
  2. Click Raw button

screenshot of raw button

  1. Copy the url

const url = 'https://gist.githubusercontent.com/UllestReal/09ca3d968dda94535e8fc25b998a6ce5/raw/705e7b335cd24e382c15e851ea8888fbdc9cdae4/gistfile1.txt'
fetch(url).then(res => res.json()).then(console.log)

Upvotes: 0

Valentin Lalev
Valentin Lalev

Reputation: 36

What you have there is just a json file. But whats missing is a server that would serve the file upon a request.

Upvotes: 1

Related Questions