Displaying JSON webapi element in HTML element

I'm currently struggling to display results from a Web API, I'm new to this kind of thing, so forgive the horrible understanding. Here is my the section of html in which I'm trying to display the value in;

                    <div class="card-content">
                        <p>The light sensor will detect exterior lighting conditions, and will turn on or off any outside lights based on the enviroment.</p><br>
                        <center>
                            <div class="reading-circle light" id="tempcircle">
<!----VALUE HERE IN P ELEMENT---->
                            </div>
                        </center>
                    </div>

And here is my JS file;

    const app = document.getElementById('tempcircle');

var request = new XMLHttpRequest();
request.open('GET', 'https://swagger.richard-murphy.iotpdev.com/api/1/devices/snapshot/paged', true);
request.onload = function () {

  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(sensor => {
      const t_reading = document.createElement('p');
      sensor.value = sensor.value.substring(0, 300);
      p.textContent = `${sensor.value}`;
      tempcircle.appendChild(p);
    });
  }
}
request.send();

Thanks in advance for any help!