DEV Community

Cover image for Consuming API's(Part 2)
Margaret W.N
Margaret W.N

Posted on

Consuming API's(Part 2)

Lets move from logging out data on the console to displaying it on the web.

In the index.html file I'll create a div with an Id of root and h1 element.

<div id="root">
    <h1 class="heading">Habits</h1>  
 </div>
Enter fullscreen mode Exit fullscreen mode

I'll access this element from my index.js using getElementById() and save it to a variable.

const container = document.getElementById('root');
Enter fullscreen mode Exit fullscreen mode

I'll be using iconify icons so I'll add a script tag to the head section of my html file. I tried using font awesome icons for this but i kept getting a type mismatch error on the console. (I'd really appreciate help on how to go about it)

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Moving on to the index.js file i already have axios fetching data. Axois returns a promise hence I'll chain a then () method which basically says "hey, after you're done retrieving the data proceed with the following operations." If data retrieval fails I'll need to catch that error, Hence I'll chain a .catch () method and pass in an arrow function that logs out an the error.

const response = await axios({
 url: 
  'http://localhost:4000/habittracker/habits',
 method: 'get'
})
.then()
.catch(err => {
  console.log(err)
})
Enter fullscreen mode Exit fullscreen mode

Inside .then() I'll pass in an arrow function with reponse as a parameter. My function body will include a variable declaration that holds response.data. Using forEach() method I'll loop through the data properties.

.then(response => {
  let data = response.data;

  data.forEach(habit => {
    //code
  })
})
Enter fullscreen mode Exit fullscreen mode

In the forEach( ) method I'll pass an arrow function with habit as a parameter. Then create and append the following html elements.

  • Div with class card.
const card = document.createElement('div')
card.setAttribute('class', 'card')
container.appendChild(card)
Enter fullscreen mode Exit fullscreen mode

The above simply states, create a div with class of card and add it as a child of the root element (container).

  • Div with class content. This will be a child element of card. It will also 'bear' two child elements; an input and a paragraph.
const content = document.createElement('div')
content.setAttribute('class', 'content')
card.appendChild(content)

const input = document.createElement('input')
input.setAttribute('type', 'checkbox')   
content.appendChild(input)

const p = document.createElement('p')
p.setAttribute('class', 'habit-title')
p.textContent = habit.title
content.appendChild(p)
Enter fullscreen mode Exit fullscreen mode

Habit.title allows me to access the title property from the fetched data.

  • Div with class edit (for lack of a better name)😅 which will be a child element of card and have two child elements.
const edit = document.createElement('div')
edit.setAttribute('class', 'edit')
card.appendChild(edit)

edit.insertAdjacentHTML('beforeend', '<p class="iconify" data-icon="clarity:edit-solid" data-inline="false" style="color: purple;"></p>');
edit.insertAdjacentHTML('beforeend', '<p class="iconify" data-icon="carbon:delete" data-inline="false" style="color: purple;"></p>');
Enter fullscreen mode Exit fullscreen mode

insertAdjacentHTML() is used to add the specified string as a html element. It takes two parameters the position and the html string. In this case I'm inserting the html as the last child in the element.

Lastly we'll add a style.css file. You can find the css here.

The output with mongodb and the server running:

Alt Text

✍Day 14

Top comments (0)