Help Me Get this App Working By Using an API!

Hi! 👋 We’re Kibi.One and today we’re going to teach you what APIs are by showing you how to use one. This tutorial was designed to give you a top level overview of how to use APIs within your application. The code referenced within the video to the left can be found below.

If you want to dive deeper, consider enrolling in our no-code SaaS incubator program.

See the Pen
YT API tutorial by Jean-Andre (@jgbarssin)
on CodePen.

Code Snippet: Add This Code Under Comment #1 Above

Copy and paste the snippet of code below under comment #1 in your JS tab above.



Js

chart.dataSource.url = "https://xbhs-pcys-rmht.n7.xano.io/api:NiutFgbf/startups";

API (JSON) Data Structure

You can view this API endpoint by visiting this URL. You’ll notice that the data is challenging for the human eye to read. In order to fix this, you can install this free Chrome extension or you can just follow along by looking at the formatted JSON file below.



JSON

[
{
“id”: 8,
“created_at”: 1623360788251,
“startup”: “ConvertLabs”,
“mrr”: 40702
},
{
“id”: 7,
“created_at”: 1623360739491,
“startup”: “QuotaGuard”,
“mrr”: 20484
},
{
“id”: 4,
“created_at”: 1623360644114,
“startup”: “HypeFury”,
“mrr”: 19994
},
{
“id”: 2,
“created_at”: 1623360565981,
“startup”: “Forge”,
“mrr”: 16296
},
{
“id”: 5,
“created_at”: 1623360673684,
“startup”: “Software Ideas”,
“mrr”: 8474
},
{
“id”: 1,
“created_at”: 1623360531665,
“startup”: “hyperping”,
“mrr”: 5536
},
{
“id”: 6,
“created_at”: 1623360717915,
“startup”: “Newclick”,
“mrr”: 1412
},
{
“id”: 3,
“created_at”: 1623360622877,
“startup”: “Vera”,
“mrr”: 1080
},
{
“id”: 9,
“created_at”: 1623360817413,
“startup”: “Scrumpy”,
“mrr”: 431
},
{
“id”: 10,
“created_at”: 1623360833575,
“startup”: “Active Cart”,
“mrr”: 315
}
]