Рубрики
Без рубрики

Потребляющая API (часть 2)

Давайте перейдем от регистрации данных на консоли для отображения его в Интернете. В файле index.html … Tagged с 100днемsofcode, JavaScript.

Давайте перейдем от регистрации данных на консоли для отображения его в Интернете.

В файле index.html я создам div с идентификатором root и h1 элемента.


    
Habits

Я получаю доступ к этому элементу из моего index.js, используя getelementbyId () и сохранить его до переменной.

const container = document.getElementById('root');

Я буду использовать Iconify Icons, поэтому добавим тег скрипта в заголовок моего HTML-файла. Я пытался использовать шрифт потрясающие значки для этого Но я продолжал получать ошибку несоответствия типа на консоли. (Я бы очень ценю помощь о том, как идти об этом)

Переход к файлу index.js у меня уже есть AXIOS FORTTHING DATA COMBERS Отказ Axios возвращает обещание, поэтому я ценю тогда () Метод, который в основном говорит «Эй, после того, как вы закончите, извлеките данные, продолжайте следующие операции. «Если извлечение данных не удается, мне нужно поймать эту ошибку, поэтому я ценю .CATCH () Способ и пройти в функцию стрелки, которая выступает в результате ошибки.

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

Внутри .then () Я передам функцию стрелки с помощью параметра в качестве параметра. Мой функциональный орган будет включать в себя переменную декларацию, которая выполняет Ответ . Использование foreach () Метод я буду петлю через свойства данных.

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

  data.forEach(habit => {
    //code
  })
})

В foreach () Метод пройдет функцию стрелки с привычкой в качестве параметра. Затем создайте и добавьте следующие HTML-элементы.

  • Div с классовой картой.
const card = document.createElement('div')
card.setAttribute('class', 'card')
container.appendChild(card)

Вышесказанное просто говорится, создайте div с классом карты и добавьте его как ребенок корневого элемента (контейнера).

  • Div с контентом класса. Это будет детский элемент карты. Это также будет «нести» два ребенка; вход и абзац.
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)

Привычка. Титл Позволяет добраться до вашего свойства заголовка из привлеченных данных.

  • Div с классом Редактировать (Из-за отсутствия лучшего имени) 😅 который будет детским элементом карты и имеет два дочерних элемента.
const edit = document.createElement('div')
edit.setAttribute('class', 'edit')
card.appendChild(edit)

edit.insertAdjacentHTML('beforeend', '
');
edit.insertAdjacentHTML('beforeend', '
');

inslipadjacenthtml () используется для добавления указанной строки в виде элемента HTML. Требуется два параметра позиция и HTML-строка. В этом случае я вставляю HTML в качестве последнего ребенка в элементе.

Наконец, мы добавим файл style.css. Вы можете найти CSS здесь Отказ

Выход с MongoDB и сервером работает:

✍day 14.

Оригинал: “https://dev.to/mtee/consuming-api-s-part-2-1b51”

Читайте ещё по теме: