<!DOCTYPE html>
<html>
<body>

<h1>Displaying a field from Bubble.io Database to a Webpage</h1>
<p>Data Type: postman, Field: postname (text)</p>

  <p>Current value of first created (oldest) item (object):</p><p id="one" class="item"></p>
  
  <h2>All information associated with first created (oldest) item (object)</h2>
  <p id="two" class='item'></p>
  
  <p>Things I learned. JSON Stringify is needed to convert data to display it properly. The Replace method was needed to get rid of the quotes. I used version-test (Bubble.io) so that my public data wouldn't accidentally be modified. </p>


</body>
</html> 
.item {
color: blue;
  font-weight: bold;
}

fetch('https://linksaw.com/version-test/api/1.1/obj/postman')
.then(data => {
return data.json();
})
.then(postman => {
  let result = JSON.stringify(postman.response.results[0].postname);
  final_result = result.replace(/['"]+/g, '');
  document.getElementById("one").innerHTML = final_result
 
});

//THE WHOLE OBJECT

fetch('https://kitgoal.com/version-test/api/1.1/obj/postman')
.then(data => {
return data.json();
})
.then(postman => {
  let result = JSON.stringify(postman.response.results[0]);
  document.getElementById("two").innerHTML = result
 
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.