API Data UI
This tutorial will show you how to use the Instagram API with JavaScript. We will go step-by-step thru setting up and developing a new Nuxt.js app with Yarn. Then we will use Node.js on the command line to run a development server to render our user interface which will call the Instagram API with the push of a button.
$ nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt.js @ v2.14.1 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯
To take full advantage of this tutorial you will need to have the following:
Node.js JavaScript runtime (version 10.13 or later)Yarn package manager (similar to npm)Note: the instructions given here for the command line are going to be from a Linux point of view but any forward-slash / based shell should work fine, for example: bash.
| Vue | Nuxt | Vuetify |
| The Progressive JavaScript Framework | The Intuitive Vue Framework | The Interface Vue Framework |
We will be working with three top frameworks to build our app. Vue combines script, markup & style to build a web-based user interface. Nuxt organizes your code using best practices. And Vuetify lets you easily add beautiful UI components.
Symbols and formatting you will find in this document:
Command: This is something you type into the terminal.
Output: This is something your command will output in the terminal.
Note: This is a note about the current topic being discussed.
Code text: This is a key phrase that we have in our script files, or other system location.
Source file: This is content we have in one of the files of our application. Notice the buttons in the upper right corner of this block.
Quote: This is usually something that is quoted from referenced material.
It is best to read thru this entire tutorial to learn how to use the Instagram API with JavaScript. We are going to follow these basic steps:
Before we get to use the Instagram API we need to set up our JavaScript environment.
Node is the JavaScript runtime engine that powers the development server.
To see if you have it installed run this command in a shell:
node -v
It should come back with a version number:
v14.8.0
Otherwise you can download and install it from: nodejs.org.
Yarn is a package manager that can control what software libraries your project installs and maintains. If you don’t have it and can’t install it and know how to use npm, you can use that instead of Yarn.
To see if you have Yarn installed run this command in a shell:
yarn -v
It should come back with a version number:
1.22.4
Otherwise you can download and install it from: yarnpkg.com.
Note: Yarn 1 id preferred over Yarn 2 until the bugs in the newer version can be worked out.
We’re going to use Yarn to create a Nuxt.js app called nuxt-app.
Type this command in the shell:
yarn create nuxt-app nuxt-app
and you should get something back like this:
yarn create v1.22.4 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "create-nuxt-app@3.2.0" with binaries: - create-nuxt-app
The installer will then ask you some questions about how to configure your setup:
create-nuxt-app v3.2.0 ✨ Generating Nuxt.js project in nuxt-app ? Project name: nuxt-app ? Programming language: JavaScript ? Package manager: Yarn ? UI framework: Vuetify.js ? Nuxt.js modules: ? Linting tools: ESLint ? Testing framework: Jest ? Rendering mode: Single Page App ? Deployment target: Server (Node.js hosting) ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) 🎉 Successfully created project nuxt-app Done in 525.23s.
Note: Don’t worry if there are info messages and warnings about incompatible versions and deprecations. These are from third-party libraries that still work fine.
Note: It’s probably a good idea to open two separate terminal instances. One to execute commands and the other to just run the development server. Both terminals should change directory to nuxt-app.
Change directories to our package directory and run the development server:
cd nuxt-app && yarn dev
The output should look like:
yarn run v1.22.4 $ nuxt ℹ NuxtJS collects completely anonymous data about usage. This will help us improving Nuxt developer experience over the time. Read more on https://git.io/nuxt-telemetry ? Are you interested in participation? Yes ╭───────────────────────────────────────╮ │ │ │ Nuxt.js @ v2.14.1 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ ℹ Preparing project for development ℹ Initial build may take a while ✔ Builder initialized ✔ Nuxt files generated ✔ Client Compiled successfully in 26.65s ℹ Waiting for file changes ℹ Memory usage: 426 MB (RSS: 538 MB) ℹ Listening on: http://localhost:3000/
Open a web browser and visit: http://localhost:3000 and you should see something like this:
Your directory structure should be:
nuxt-app/ ├── assets/ │ ├── README.md │ └── variables.scss ├── .babelrc ├── components/ │ ├── Logo.vue │ ├── README.md │ └── VuetifyLogo.vue ├── .editorconfig ├── .eslintrc.js ├── jest.config.js ├── layouts/ │ ├── default.vue │ ├── error.vue │ └── README.md ├── middleware/ │ └── README.md ├── node_modules/ ├── nuxt.config.js ├── package.json ├── pages/ │ ├── index.vue │ ├── inspire.vue │ └── README.md ├── plugins/ │ └── README.md ├── README.md ├── static/ │ ├── favicon.ico │ ├── README.md │ ├── v.png │ └── vuetify-logo.svg ├── store/ │ └── README.md ├── test/ │ └── Logo.spec.js └── yarn.lock
Nuxt.js creates automatic routing for us for all directories and files under the pages directory. So the view we see at the root (http://localhost:3000/) is served by pages/index.vue.
By default Nuxt.js will use layouts/default.vue for the main layout.
If you installed the ES (ECMAScript) Linter during installation let’s disable the rule that disallows commas on the last entry of a container object, like Arrays, for example. We’ll do this by adding a rule to the config file:
.eslintrc.js:
rules: {
'comma-dangle': ['off']
}
We will use the Instagram API from yuananf since it is free for up to twenty (20) requests per day.
Like most API services on the Internet we are required to signup in order to obtain an API Key. We supply this key to their endpoints with every request. It is used to track us to make sure we are abiding by their Terms Of Service. Basically they want to make sure we’re not spamming them too quickly.
The easiest way to get started is to open up a web browser, signup for a free account with RapidAPI and head over to the dashboard. Click on the blue Subscribe to Test button and select the Basic (free) plan:
The API endpoint we want is MediaLikers. The response will return info about all the users who liked a particular upload. This endpoint requires an Instagram Shortcode which is a unique identifier for a piece of media, for example an image or a video. You can use your own shortcode or you can use this one: BzinsTanXXv.
This shortcode is found at the end of the following URL:
Now we’re ready to test the MediaLikers endpoint to the Instagram API we just subscribed to.
Click on “GET MediaLikers” in the left-hand column or on the following direct link:
In the Code Snippets section: go to the code selector drop-down and select (Shell) cURL then click Copy Code.
Paste the code you just copied to the clipboard into your terminal and press enter to run it.
curl --request GET \ --url 'https://instagram28.p.rapidapi.com/media_likers?short_code=BzinsTanXXv' \ --header 'x-rapidapi-host: instagram28.p.rapidapi.com' \ --header 'x-rapidapi-key: [PUT YOUR API KEY HERE]'
Note: You should paste in the code you copied because the one above does not contain a valid key.
You should get back lots of data about Nodes. Save the entire output text to a JSON file.
assets/instagram.json:
{"data":{"shortcode_media":{"id":"2081400546117121519","shortcode":"BzinsTanXXv","edge_liked_by":{"count":1896,"page_info":{"has_next_page":true,"end_cursor":"QVFDNHFfQzNtdUFPTTloeWNUaUQxQ0tVTmNVVDkyazJhTGtWUWFMcDFuMS10ak94emtFNHVKOVRzcVhBcWZVOEhpR1BNYzhvamYxdW55aElCUENTUFdpQQ=="},"edges":[{"node":{"id":"46907128","username":"briana1872","full_name":"Briana","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/38097070_673518503010762_714415041721401344_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=FrGq64GIvtUAX-9eNoX&oh=588a919f259d02041661b30233a2551c&oe=5F61E0F1","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"4728807805","username":"talomlenzing","full_name":"lenzing talom","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/107259240_276273430312888_8113026924666624601_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=QnZ2pVPrQR0AX-Gjdjz&oh=d3ecb64db06163d5f847838e1a654dd3&oe=5F6179AE","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"38203949340","username":"maxbrody9","full_name":"Max Mueller","profile_pic_url":"https://instagram.fcgh2-1.fna.fbcdn.net/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fcgh2-1.fna.fbcdn.net&_nc_ohc=d3zLaxzyOPwAX9rYtT0&oh=a860d085bdfd3ff5bd33edf2124c138a&oe=5F5ED20F&ig_cache_key=YW5vbnltb3VzX3Byb2ZpbGVfcGlj.2","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"3417497582","username":"m.m.z.p_45","full_name":"m.m.z.p.45","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/51393388_2262438944023219_8640968140735381504_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=CzJ1d_L72bQAX_yuhcZ&oh=a46f0ee55a7dcbc0002845d2e9ed7b57&oe=5F5EEE03","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"6184807875","username":"jake_1352","full_name":"Jake","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/22277436_380798229005090_5513869969403674624_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=xkkqMBj7baQAX-HGUKL&oh=e26c450fddda00b501a734a91995903e&oe=5F60F30F","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"25599966071","username":"gardening_weekly","full_name":"","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/93360400_231752168068836_2966321770027548672_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=ljXQg9BNGPgAX-bdbfn&oh=e932433c5536fb59355f454d80cfa95d&oe=5F624910","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"189022666","username":"pambin","full_name":"Pambi💫","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/19984963_102712527050424_1017284135296696320_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=CLsnpyWx-WgAX8Gr_lb&oh=2e72afec67ee39d76fd7a8f56137a015&oe=5F615987","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"9432961597","username":"sakil.22","full_name":"Sakil Ahmed","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/90993693_3059522864111948_1852138284860309504_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=Rhvijkylu4sAX86pxAg&oh=b90b0528fa25ba780e6fc0624928d680&oe=5F5FC897","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"2123884998","username":"alexis_1394_nez","full_name":"","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/103629752_564142224472001_8171551700386386310_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=C7sGAUdfhSkAX8JrU0o&oh=aa2e900bbb35ce9785f1ab48668ed5c5&oe=5F61BFD3","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"34348342","username":"nicky.zeee","full_name":"ℕ𝕚𝕔𝕜 ℤ𝕠𝕣𝕠𝕪𝕒","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/84176925_696081817462927_8192835771376336896_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=AzvaGrHHj-UAX_EQc-P&oh=e5a962a9a36cb7915638d1b0a5762311&oe=5F603BE0","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"30053722","username":"bunchabates","full_name":"🌿 kt bates 🌿","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/95266825_634217417156502_6265893265187274752_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=_p61AoejVjAAX8zOc-h&oh=5dcab0d98e9d426e6d958881a4e5cbf8&oe=5F5FC474","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"2680137037","username":"nicogrocholewski","full_name":"Nico Grocholewski Sembiring","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/90938297_789377821465859_1418838065366958080_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=UoRc_gsJqcYAX-mtxvY&oh=d6c3ac0b10f108e0e3cceca13777d6b8&oe=5F619050","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"9057774391","username":"de.bora9215","full_name":"@,Perla, Ana.","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/95565866_225891575504991_5323056250458472448_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=eAiW-dxfsMoAX_-RNoP&oh=dfe33badc7efc7dee9dce5fdc159cdad&oe=5F5FDD5C","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"604996582","username":"kaitpittman","full_name":"Kaitlyn Pittman","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/12357515_736985729766117_1778932993_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=0t17L93FL5EAX86-XnN&oh=f7f9f58ccd5ba38be251a051206f536b&oe=5F60DB01","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"5626710023","username":"amayarufino","full_name":"Rufino Amaya","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/19228139_1957229081200600_9069087774971265024_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=hQ666Ukmy30AX8sLUOK&oh=125922bc7e4e82c8898f49d133bc2575&oe=5F626FF2","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"441188405","username":"tatertot80","full_name":"TATER","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/11417325_1713871298836358_1410651461_a.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=q6viXE6u_3wAX_CjMXm&oh=0497f548e29d4c608c52aab2d9c8c051&oe=5F6024EE","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"14714790909","username":"moonlighthillfarm","full_name":"Moonlight hill farm","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/101249341_544415936247384_5650879288707121152_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=tgO_cdhlqgAAX82NzHW&oh=dce510b6067cb586a1f60e303f313288&oe=5F5FDDD7","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"1594862636","username":"m_h_e_r_","full_name":"Mher","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/103549889_576891793257633_3123462966360615075_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=LMoNxDOACcMAX_cq3-E&oh=f824136d3ec539a16bb9f8b67dcaf78b&oe=5F60F901","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"635101218","username":"muhammadrabdullah1","full_name":"Muhammad R. Abdullah","profile_pic_url":"https://scontent-iad3-1.cdninstagram.com/v/t51.2885-19/s150x150/104664571_997195870700953_2547029243696978355_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_ohc=fmALO_2qqggAX93uNKb&oh=45c7ac876a322db7931e1958ba81042c&oe=5F5FC8D1","is_private":true,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}},{"node":{"id":"12116403501","username":"gibson.paddy","full_name":"Paddy Gibson","profile_pic_url":"https://instagram.fcgh2-1.fna.fbcdn.net/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fcgh2-1.fna.fbcdn.net&_nc_ohc=d3zLaxzyOPwAX9rYtT0&oh=a860d085bdfd3ff5bd33edf2124c138a&oe=5F5ED20F&ig_cache_key=YW5vbnltb3VzX3Byb2ZpbGVfcGlj.2","is_private":false,"is_verified":false,"followed_by_viewer":false,"requested_by_viewer":false}}]}}},"status":"ok"} Tip: You can add an output “redirect”, which is just a greater-than symbol (>), to the end of your curl command, followed by the file name, to save it directly into the file.
curl --request GET --url 'https://instagram28.p.rapidapi.com/media_likers?short_code=BzinsTanXXv' --header 'x-rapidapi-host: instagram28.p.rapidapi.com' --header 'x-rapidapi-key: [PUT YOUR API KEY HERE]' > assets/instagram.json
Note: Keep your x-rapidapi-key somewhere handy as we will need it for later.
Now let’s create the user interface to access the the Instagram API with JavaScript and display the results. We will add a new route for the page we will be working with.
First add a link in the navigation drawer on our layout in the exported data items:
layouts/default.vue:
...,
items: [
{
icon: 'mdi-apps',
title: 'Welcome',
to: '/'
},
{
icon: 'mdi-chart-bubble',
title: 'Inspire',
to: '/inspire'
},
{
icon: 'mdi-instagram',
title: 'Instagram',
to: '/instagram'
},
],... If we visit this page we’ll get a 404-not-found error since we haven’t created it yet:
So let’s create a new page.
To start off with let’s just display the Instagram icon from MDI:
pages/instagram.vue:
<template>
<v-layout>
<v-flex class="text-center">
<v-icon
size="100pt"
>
mdi-instagram
</v-icon>
</v-flex>
</v-layout>
</template> Now our page should look better:
Let’s add Tyler Krupicka’s JSON Tree Component package so that we can view our results in a nice hierarchical tree viewer.
On the command line, tell Yarn to add the component:
yarn add vue-json-component
Again don’t worry about the warnings:
yarn add v1.22.4 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vue-json-component@0.4.1 info All dependencies └─ vue-json-component@0.4.1 Done in 31.21s.
You may have noticed that files with the .vue extension like layouts/default.vue that we looked at earlier contain both markup and script. They can also contain style as well. These are called single-file components and are made possible by the Webpack build system used by Nuxt.js.
It’s probably a good idea to develop our UI using cached data so we do not risk going over our maximum requests per day as stipulated in the API Terms of Service.
Let’s add a button to fetch our saved instagram.json file that we created earlier.
Replace our view to look like this:
pages/instagram.vue:
<template>
<v-layout>
<v-flex class="text-center">
<v-icon size="100pt">
mdi-instagram
</v-icon>
</v-flex>
<v-flex>
<v-card>
<v-card-title class="headline">
Let's get some data
</v-card-title>
<v-card-actions>
<v-btn
title="Clear"
@click="clear"
>
X
</v-btn>
<v-btn
title="Go get the fake data"
color="primary"
@click="getInstagramFakeData"
>
Fake
</v-btn>
</v-card-actions>
<v-card-text>
<json-view :data="result" />
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template> Then we also want to add the script to that same file.
pages/instagram.vue:
<script>
import { JSONView } from 'vue-json-component'
import instagram from '../assets/instagram'
export default {
components: { 'json-view': JSONView },
data () {
return {
result: {},
}
},
methods: {
clear () {
this.result = {}
},
getInstagramFakeData () {
this.result = instagram
},
},
}
</script> Now when we visit our Instagram page and click the blue FAKE button we should see the JSON viewer populated with our cached data:
Now let’s add another button to the <template> section to request the real data.
pages/instagram.vue:
<v-btn title="Go get the real data" color="success" @click="getInstagramAPIData" > Fetch </v-btn>
And we’ll add a new function to the <script> section as the click-handler:
async getInstagramAPIData () {
const query = {
short_code: 'BzinsTanXXv', // use any shortcode you want
}
const url = new URL('https://instagram28.p.rapidapi.com/media_likers')
url.search = new URLSearchParams(query).toString()
const headers = {
'x-rapidapi-host': 'instagram28.p.rapidapi.com',
'x-rapidapi-key': '[PUT YOUR API KEY HERE]',
}
const response = await fetch(url.toString(), { headers })
this.result = await response.json()
}, Note: Remember that key we saved from earlier? Don’t forget to replace the [PUT YOUR API KEY HERE] text on line #11 with your actual API Key.
When you click the green FETCH button the JSON tree viewer should be displaying real live data.
Let’s update our page format format a little. Replace the current template to look like this:
pages/instagram.vue:
<template>
<v-layout>
<v-card class="mx-auto">
<v-app-bar>
<v-toolbar-title>
<v-icon size="xx-large">
mdi-instagram
</v-icon>
</v-toolbar-title>
<v-spacer />
<v-btn
title="Clear"
@click="clear"
>
X
</v-btn>
<v-btn
title="Go get the fake data"
color="primary"
@click="getInstagramFakeData"
>
Fake
</v-btn>
<v-btn
title="Go get the real data"
color="success"
@click="getInstagramAPIData"
>
Fetch
</v-btn>
</v-app-bar>
<v-container>
<v-row dense>
<v-col cols="12">
<json-view :data="result" />
</v-col>
</v-row>
</v-container>
</v-card>
</v-layout>
</template> Things are looking a little cleaner now:
Let’s now add in some UI components to display the API results data.
Add a new display column to the template:
<v-container>
<v-row dense>
<v-col cols="12">
<json-view :data="result" />
</v-col>
<v-col
v-for="(edge, i) in edges"
:key="i"
cols="12"
>
<v-card>
<div class="d-flex flex-no-wrap justify-space-between">
<div>
<v-card-title
class="headline"
v-text="edge.node.full_name"
/>
<v-card-subtitle v-text="edge.node.username" />
<v-chip filter :disabled="!edge.node.is_private" :input-value="edge.node.is_private"> Private </v-chip>
<v-chip filter :disabled="!edge.node.is_verified" :input-value="edge.node.is_verified"> Verified </v-chip>
<v-chip filter :disabled="!edge.node.followed_by_viewer" :input-value="edge.node.followed_by_viewer"> Followed </v-chip>
<v-chip filter :disabled="!edge.node.requested_by_viewer" :input-value="edge.node.requested_by_viewer"> Requested </v-chip>
</div>
<v-avatar class="ma-3" size="125">
<v-img :src="edge.node.profile_pic_url" />
</v-avatar>
</div>
</v-card>
</v-col>
</v-row>
</v-container> And add in a computed method to keep track of our results “edges”:
data () {
return {
result: {},
}
},
computed: {
edges () {
console.log(this.result)
if (
this.result &&
this.result.data &&
this.result.data.shortcode_media &&
this.result.data.shortcode_media.edge_liked_by
) {
return this.result.data.shortcode_media.edge_liked_by.edges
} else {
return []
}
}
},
methods: {
Now it actually looks like we have some data coming back from the API:
I hope you enjoyed this tutorial and perhaps learned something about how to build an application using the Instagram API with JavaScript. Nuxt.js seems like a good framework to write packages that adhere to current best practices, and that’s nice.
Take a look at the GitHub code to see how to add a nice loading animation. And of course, if you have any questions be sure to leave in the comments below.
If you would like to see the final version of the project have a look at this GitHub repository.
Yes, the Instagram Basic Display API allows users of your app to get basic profile information, photos, and videos in their Instagram accounts. The easiest thing to do is use the RapidAPI Marketplace.
Use the Media endpoint.
Data access authorization is controlled by your app users through the use of user permissions. Users must grant your app these permissions through the Authorization Window before your app can access their data. All permissions need to be approved for your app through the App Review process before they can be used in Live Mode.
We're thrilled to announce the latest update to the Rapid Enterprise API Hub (version 2024.3)!…
Are you curious about what your API consumers are searching for? Is your Hub effectively…
The RapidAPI team is excited to announce the February 2024 update (version 2024.2) for the…
This January's release brings exciting features and improvements designed to empower you and your developers.…
Rapid API is committed to providing its users with the best possible experience, and the…
In today's fast-paced digital world, APIs (Application Programming Interfaces) have become the backbone of modern…
View Comments
Can i get email address of user from instagram api?
I doubt it.