Как мне оформить вывод из этой функции asyn c await, которая успешно извлекает данные из базы данных? - PullRequest
Новая
       0

Как мне оформить вывод из этой функции asyn c await, которая успешно извлекает данные из базы данных?

0 голосов
/ 06 апреля 2020 
<script>
        getData();

        async function getData() {
          const response = await fetch("/members");
          const data = await response.json();

          for (item of data) {
            const root = document.createElement("div");
            const member = document.createElement("div");
            member.textContent = `member: ${item.member}`;

            root.append(
              item.firstname,
              item.lastname,
              item.mobile,
              item.contactname,
              item.contactphone
            );
            document.body.append(root);
          }
          console.log(data);
        }
</script>

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Просто добавьте к нему класс с member.classList.add('member-item')

пример 

<head>
<style> 
.member-item {
background-color: white;
} 
</style>
</head>
<body>
<div id="root" />
<script>
       const root = document.querySelector('#root')

async function getData() {
  // const response = await fetch("/members");
  // const data = await response.json();
  const sampleData = [{
    firstName: 'Dave',
    lastname: 'Smith',
    mobile: '0632452345',
    contactname: 'Dave',
    contactphone: '0632452345',
  },
                     {
    firstName: 'Mike',
    lastname: 'Smith',
    mobile: '06324234345',
    contactname: 'Mike',
    contactphone: '0635435345',
  }]

for(let i = 0; i < sampleData.length; i+= 1) {
  const div = document.createElement('div');
  div.innerHTML = `
<p>First Name ${sampleData[i].firstName}</p>
<p>Last Name ${sampleData[i].lastname}</p>
<p>mobile Name ${sampleData[i].mobile}</p>
<p>Contact Name ${sampleData[i].contactname}</p>
<p>Contact Phone ${sampleData[i].contactphone}</p>
<hr>
`;
  root.append(div)
}
}

getData()
</script>
</body>
0 голосов
/ 06 апреля 2020

Точно так же, как вы делаете что-либо еще Напишите CSS правило. Добавьте любые классы (например, member.classList.add("foo")) и др. c. вам нужно спроектировать c достаточный селектор для элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...