Help with coding project. Api data not displaying on webpage

Hello.

I’m pretty knew to JavaScript.
I’m working on a coding project for a potential job that requires me to pull data from a fake api and display it on a webpage. The data that needs to show on the page is Title, Author, and body. I’ve managed to get the data to display on my page but there is no Author data in the api which means I need to add it. I used fetch patch to add Author to some of of the resources and I see in the console that the change has been done but it won’t display on the webpage. I’ve been searching for hours for a solution and can’t seem to find one.
Another question I have(but not as important) is is there a way to assign random names for Author to each of the resources?
Thanks for any help!

HTML

<!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">
    <link rel="stylesheet" href="resources/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   
    <title>Code Problem 4</title>
</head>
<body>
    <header><h1>Blog Post</h1></header>
    <div id="content">
        <h2>Posts</h2>
        <form class="search" action="action_page.php">
            <input type="text" placeholder="Filter by Author" name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
    </div>
    <script src="resources/javascript/script.js"></script>
</body>
<footer>
    <span class="shapes">&#9679; &#9652; &#9632;</span>
 </footer>
</html>

CSS

/* Header */
header {
    display: flex;
    width: 100%;
    margin: 0px;
    background-color: black;
}
header h1 {
    color: white;
    font-size: 16px;
    margin-left: 20px;
}
/* Body*/
h2 {
    font-size: 40px;
}
#content {
    display: flex;
    flex-direction: column;
    margin-left: 80px;
    margin-right: 80px;
}
.search {
    margin-bottom: 10px;
    
}
.post {
    display: flex;
    flex-direction: column;
    background-color: lightblue;
    margin-bottom: 10px;
}

/* Footer */
footer {
    background-color: whitesmoke;
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    height: 180px;
}

footer span {
    font-size: 50px;
}

JS

Promise.all([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(id => fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { method:'PATCH', body: JSON.stringify({ name: "CS Lewis", }), headers: { 'Content-Type': 'application/json; charset=UTF-8' }, }) .then((response) => response.json()))) .then((json) => console.log(json)); function fetchData() { fetch('https://jsonplaceholder.typicode.com/posts/').then(response => { if (!response.ok) { throw Error('ERROR'); } return response.json(); }) .then(data => { console.log(data); const html = data.map(posts => { return ` <div class="post"> <p>Title: ${posts.title}</p> <p>Author: ${posts.name}</p> <p>Body: ${posts.body}</p> </div>` }).join(' '); console.log(html); document.querySelector('#content').insertAdjacentHTML('beforeend', html); }) .catch(error => { console.log(error); }) } fetchData();

Hello, as far i can see you are using sample html right? in this case you should use js to manipulate your html directly, try to use something like " document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;" seee the link for better explanation HTML JavaScript