How do you send a request and display 1 part of the information on the page using javascript

Question

How do i make a get request to https://my-ocular.jeffalo.net/api/users/PoIygon and display the "status" on status, "color" is the background color of the id "color" and "name" has the name on this html 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>YAY</title>
    <link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
    <div class="wrapper">
        <span id="name">name</span>
        /
        <span id="status">
        status
            <div id="color">css background is the color</div>
        </span>
    </div>
</body>
</html>

Does this answer your question? [How to make an AJAX call without jQuery?](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Cornel Raiu, Jul 02 '21 at 02:14

Bert W · Answer 1 · 2021-07-02T03:49:50.873

My solution is to use fetch api and create the content dynamically. There was a slight issue with your html, a div element is not able to be a child of a span element so I modified it slightly. I hope this works for you.

const wrapper = document.querySelector('.wrapper');

function createContent(data) {
  const content = `
     <div id="color" style="background-color: ${data.color};">
      <span id="name">${data.name}</span>
        /
      <span id="status">${data.status} </span>
     </div>
  `;
  wrapper.insertAdjacentHTML('beforeend', content);
}

fetch('https://my-ocular.jeffalo.net/api/user/PoIygon')
  .then(response => response.json())
  .then(data => createContent(data))
  .catch((error) => console.log(error));

<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>YAY</title>
    <link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
    <div class="wrapper">
<!--    add JS dynamically here      -->
       
    </div>
</body>
</html>

How do you send a request and display 1 part of the information on the page using javascript

1 Answers1