fake-api-javascript

Hi!

This time I challenged myself to create simple API request and display the results in browser.

{JSON} Placeholder Free fake API

For this task I will use {JSON} Placeholder Free fake API for testing and prototyping. If you paste https://jsonplaceholder.typicode.com/todos/ in the browser you will receive JSON objects like below.

Fetch API

To get this objects from the API we will use asynchronous function. This is simply because function like that will wait until the request completes.

Also we will use Fetch API to access resources across the network. Function fetch() will start the request for a data and return a promise.

To catch any possible errors we will use try catch block, and log any possible errors. So our function should look like this.

const url = 'https://jsonplaceholder.typicode.com/todos/'

async function getTasks(url) {
  try {
      let res = await fetch(url)
      return res.json()
  } catch (error) {
      console.log(error)
  }
}

So now our function will return response which body text is parsed as JSON.

Display in the browser

We still need to display our data in browser. For this in our index.html file in we can put a table with id, so we can target it later in our JS file.

<body>

  <table id="tasks"></table>

</body>

Now we go back to create our function to display our results. Here we call our function from before getTasks() and we assign it as items so we can work on the result. Our function getTasks() returns an object so we need to remember that.

First we create our html code placeholder. This will be our table titles.

async function renderTasks(url) {
  let items = await getTasks(url)
  let html = `<tr>
   <th>Id</th>
   <th>Title</th>
   <th>Completed</th>
    </tr>`
}

Next we iterate through our items. Each iteration we crete new html code and assign items parameters to according table data sections. Lastly we need to add html parts together.

In meantime we also target our table that we created before. And after we finish iterating through items elements we put all our html inside container. We only need to call our function now.

let container = document.getElementById('tasks')

async function renderTasks(url) {
  let items = await getTasks(url)
  let html = `<tr>
          <th>Id</th>
         <th>Title</th>
         <th>Completed</th>
              </tr>`

  items.forEach(item => {
    let htmlpart = `<tr>
                      <td>${item.id}</td>
                      <td>${item.title}</td>
                      <td>${item.completed}</td>
                    </tr>`
    html += htmlpart;
  })
  container.innerHTML = html
}
renderTasks(url)

Styles

As we can see our code is already working, but it looks ugly.

By adding few css styles it will look more presentable.

#tasks {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tasks td, #tasks th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tasks tr:nth-child(even){background-color: #f2f2f2;}

#tasks tr:hover {background-color: #ddd;}

#tasks th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

Now we can clearly see the data that we got from our fake API.

If you find any mistakes or you have ideas how to refactor my solutions to be simplier/ better please let me know :)

Connect to fake Api JavaScript

This time I tried to connect to fake Api and display results in the browser.

Table of contents

No headings in the article.

Connect to fake Api JavaScript

This time I tried to connect to fake Api and display results in the browser.

Table of contents

No headings in the article.

Did you find this article valuable?