Square space is a no code platform. You are constrained by what it provides. Let’s consider you are developing a website to display your favorite books. You want to dynamically query a URL and display the data in your website. There isn’t a straightforward way to do this now. In this tutorial I will explain how you can do this.
Goto square space, and add a new page. Once there, go and add a code snippet as below.
![](https://i1.wp.com/redflowerinc.com/wp-content/uploads/2021/03/Screen-Shot-2021-03-31-at-1.54.59-PM.png?fit=640%2C311&ssl=1)
Next, you would need to select the HTML option. Uncheck the checkbox display source. This is very important. Else it will display the javascript code as plain text.
![](https://i0.wp.com/redflowerinc.com/wp-content/uploads/2021/03/Screen-Shot-2021-03-31-at-1.55.42-PM.png?resize=663%2C566&ssl=1)
Now comes the fun part. Here I am using a random API to display the data.
<p id="demo"></p>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch("https://site.api.espn.com/apis/site/v2/sports/football/college-football/news", {
"method": "GET"
})
.then(response => response.json())
.then(data => {
document.getElementById("demo").innerHTML = data["header"];
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (key === "articles") {
// display data here
}
}
}
console.log(data);
})
.catch(err => {
console.log(err);
});
}, false);
</script>
As you can see in the above code snippet, I am using JS to display the data from the endpoint. You can copy this code into square space to display the data.
Leave a Reply