How do I populate a form with values from API database when I click reply button and edit the data

When I click the 'reply' button, I want the user to be sent to a form, which

• Would have the pre-populated details that the user first inputted when creating the form
• Should be able to edit the details of the form

Kind of how on gmail, you can edit a form and it would be prefilled with some details.

Currently, the form is just empty and not showing the API data that I want. What can I update or do?

function addReply(id) {
  let actionDivReplyBtn = document.querySelector('.actions');
  let replyBtn = document.createElement("button");
  replyBtn.classList.add('reply');
  replyBtn.innerHTML = `<i class="fa fa-reply" aria-hidden="true"></i>`;
  actionDivReplyBtn.appendChild(replyBtn);

  replyBtn.addEventListener('click', () => {
    // Show the compost-form for user to edit and hide other views
    document.querySelector('#compose-view').style.display = 'block';
    document.querySelector('#emails-view').style.display = 'none';
    document.querySelector('#content-view').style.display = 'none';

    let recipients = document.getElementById('compose-sender').value;
    let subject = document.getElementById('compose-subject').value;
    let body = document.getElementById('compose-body').value;



    fetch(`/emails/${id}`)
      .then(response => response.json())
      .then(email => {
        recipients = email.sender;
        if (subject.startsWith("Re")) {
          subject = email.subject;
        } else {
          subject = "Re:" + email.subject;
        }
        body = `On ${email.timestamp} ${email.sender} wrote:` + email.body;

      })

    function updateDetail(e) {
      e.preventDefault();

      fetch(`/emails/${id}`, {
        method: 'PUT',
        body: JSON.stringify({
          "recipients": recipients,
          "subject": subject,
          "body": body
        })
      })
    }
  })
}

<div id="compose-view">
  <h3>New Email</h3>
  <form id="compose-form">
    <div class="form-group">
      From: <input disabled class="form-control" value="" id="compose-sender">
    </div>
    <div class="form-group">
      To: <input id="compose-recipients" class="form-control">
    </div>
    <div class="form-group">
      <input class="form-control" id="compose-subject" placeholder="Subject">
    </div>
    <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
    <input type="submit" class="btn btn-primary" id="submit-btn" />
  </form>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/LWcxkjK