0

I am attempting to fetch an API for the user names. but instead of listing names it lists {user.name} rather than the actual names.

How it should look like:

enter image description here

How it ends up looking:

enter image description here

The code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users</title>
</head>
<body>
    <h2>Users:</h2>
    <ul></ul>

    <script>
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(res => {
                return res.json();
            })
            .then(data => {
                data.forEach(user => {
                    const markup = '<li>${user.name}</li>';

                    document.querySelector('ul').insertAdjacentHTML('beforeend', markup);
                });
            })
            .catch(error => console.log(error));
    </script>
</body>
</html>

What am I doing wrong?

Mar1
  • 35
  • 4
  • 1
    Also, consider the alternative `data.forEach(({ name }) => document.querySelector("ul").append(Object.assign(document.createElement("li"), { textContent: name })));`, which avoids HTML parsing and destructures the `name` property of `user` right away. – Sebastian Simon Oct 13 '22 at 21:45

0 Answers0