async function attachEvents() {
    let selectMenu = document.getElementById('posts');
    let postBody = ''
    document.getElementById('btnLoadPosts').addEventListener('click', async () => {
        let posts = await fetch('http://localhost:3030/jsonstore/blog/posts');
        let postsData = await posts.json();
        selectMenu.innerHTML = "";
        for (let post of Object.values(postsData)) {
            selectMenu.add(new Option(post.title, post.id));
            postBody= post.body
        }
    });
    document.getElementById('btnViewPost').addEventListener('click', async () => {
        let selectMenu = document.getElementById('posts');
        let postComments = document.getElementById('post-comments');
        let postTitle = document.getElementById('post-title');
        let commentPara = document.getElementById('post-body');
        postComments.innerHTML = "";
        let [body,comments] = await Promise.all([
            fetch(`http://localhost:3030/jsonstore/blog/posts/` +selectMenu.value),
            fetch('http://localhost:3030/jsonstore/blog/comments'),
        ]);
      let [bodyText,commentsData] = await Promise.all([body.json(),comments.json()]);
      postTitle.textContent = selectMenu.options[selectMenu.selectedIndex].text;
      commentPara.textContent = postBody;
         const comm = Object.values(commentsData).filter(c => c.postId == selectMenu.value)
        .forEach(x=>{
            let li = document.createElement('li');
            li.id = x.postId;
            li.textContent = x.text;
            postComments.appendChild(li);
        })
    });
 }
attachEvents();