CODEWITHSUNDEEP
javascriptasync-awaitfetch
Ivy Chen
Ivy Chen

Reputation: 35

How to return multiple strings on different HTML elements in async /await?

I am trying to get the return results (title, content, poet) to show up on the HTML. Right now, only the content is changing dynamically whenever I refresh the page. I'm not sure what I am doing wrong in .then() - can you put multiple document.getElementId in there, or is there another way to structure it?

Note: I commented the other document.getElementId and document.getElementsByTagName because they just ended up showing the entire content 2 times

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel = "stylesheet" href = "style.css">
    <title>Fetch a poem</title>
  </head>
  <body>
    <h1 class = "title">Title</h1>
    <h3 id = "content">Fetch a Poem</h3>
    <p id = "poet">Poet</p>
    <script>
      console.log('about to fetch a poem');
      catchPoem()
        .then(poem => {
          // document.getElementsByClassName('title').innerText = poem;
          document.getElementById('content').innerText = poem;
          // document.getElementById('poet').innerText = poem;
          console.log('content is showing');
        })
        .catch(error => {
          console.log('error!');
          console.error(error);
        });

      async function catchPoem() {
        const response = await fetch('https://www.poemist.com/api/v1/randompoems');
        let json = await response.json();
        let title = json[0].title
        let content = json[0].content
        let poet = json[0].poet.name
        console.log(title)
        console.log(content)
        console.log(poet)
        return [title, content, poet]
      }
    </script>
  </body>
</html>

Upvotes: 0

Views: 56

Answers (2)

Pawan Bishnoi
Pawan Bishnoi

Reputation: 2127

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel = "stylesheet" href = "style.css">
    <title>Fetch a poem</title>
  </head>
  <body>
    <h1 id = "title">Title</h1>
    <h3 id = "content">Fetch a Poem</h3>
    <p id = "poet">Poet</p>
    <script>
      console.log('about to fetch a poem');
      catchPoem()
        .then(poem => {
          document.getElementById('title').innerText = poem[0];
          document.getElementById('content').innerText = poem[1];
          document.getElementById('poet').innerText = poem[2];
          console.log('content is showing');
        })
        .catch(error => {
          console.log('error!');
          console.error(error);
        });

      async function catchPoem() {
        const response = await fetch('https://www.poemist.com/api/v1/randompoems');
        let json = await response.json();
        let title = json[0].title
        let content = json[0].content
        let poet = json[0].poet.name
        console.log(title)
        console.log(content)
        console.log(poet)
        return [title, content, poet]
      }
    </script>
  </body>
</html>

Another Way Of Generalization

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Fetch a poem</title>
  </head>
  <body>
    <div id="content">
      <p id="loader">Loading Poems ....</p>
    </div>
    <script>
      console.log("about to fetch a poem");
      catchPoem()
        .then((poems) => {
          let div = document.getElementById("content");
          div.removeChild(document.getElementById("loader"));
          for (let poem of poems) {
            let title = document.createElement("h1");
            title.innerHTML = poem.title || "No Title";
            div.appendChild(title);

            let poemTag = document.createElement("h3");
            poemTag.innerHTML = poem.content || "No Poem";
            div.appendChild(poemTag);

            let poet = document.createElement("p");
            poet.innerHTML = poem.poet.name || "No Poet";
            div.appendChild(poet);
          }
        })
        .catch((error) => {
          console.log("error!" + error);
        });

      async function catchPoem() {
        const response = await fetch("https://www.poemist.com/api/v1/randompoems");
        let json = await response.json();
        return json;
      }
    </script>
  </body>
</html>

Upvotes: 0

DecPK
DecPK

Reputation: 25408

You need to set all three in the .then block

document.querySelector( '.title' ).textContent = title;
document.getElementById( 'content' ).textContent = content;
document.getElementById( 'poet' ).textContent = poet;

I've used textContent here, You can use innerText

console.log('about to fetch a poem');
catchPoem()
  .then(([title, content, poet]) => {
    // document.getElementsByClassName('title').innerText = poem;
    document.querySelector('.title').textContent = title;
    document.getElementById('content').textContent = content;
    document.getElementById('poet').textContent = poet;
    // document.getElementById('poet').innerText = poem;
    console.log('content is showing');
  })
  .catch(error => {
    console.log('error!');
    console.error(error);
  });

async function catchPoem() {
  const response = await fetch('https://www.poemist.com/api/v1/randompoems');
  let json = await response.json();
  let title = json[0].title
  let content = json[0].content
  let poet = json[0].poet.name
  return [title, content, poet]
}
h1, p{
  text-align: center;
}

h1, h3, p{
  padding: .5rem 1rem;
  border-radius: 4px;
}

.title{
  background-color: cadetblue;
}

#content{
  background-color: chocolate;
}

#poet{
  background-color: yellow;
}
<h1 class="title">Title</h1>
<h3 id="content">Fetch a Poem</h3>
<p id="poet">Poet</p>

Upvotes: 1

Related Questions