Etsy API

Etsy API

March 28, 2021

example html javascript fetch

This code uses the fetch() function to get the JSON from and then builds some HTML thumbnails from the data.

async function getEtsyListings() {
  const containerDiv = document.getElementById('etsy-listings');

  const response = await fetch('');
  const listings = await response.json();

  const indexes = [];
  while (indexes.length < 6) {
    const index = Math.floor(Math.random() * listings.length);
    if (!indexes.includes(index)) {

  for (const index of indexes) {
    const listing = listings[index];

function buildEtsyThumbnail(listing) {
  const div = document.createElement('div');
  div.innerHTML += `<a href="${listing.url}"><img src="${listing.imageSmallUrl}" /></a>`;
  div.innerHTML += `<a href="${listing.url}">${listing.title}</a>`;
  return div;

etsy listings

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Remix Ideas

  • If you have your own Etsy store, use the Etsy API to build links to your own listings.
  • Find another JSON API and use the fetch() function to get data from it, and then build a webpage based on that data.

Fetch Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!