Discord.js v14 – Hug slash command api not connecting correctly to command

I have a hug slash command that i’m trying to implement using a link from the some-random-api website. Only problem is i’m not sure on how to make it so that the random generated hug gif loaded up is linked to the command.

How can i fix this?

Here is the code i’m using currently:

const { EmbedBuilder, SlashCommandBuilder, AttachmentBuilder } = require("discord.js");

module.exports = {
  data: new SlashCommandBuilder()
    .setName("hug")
    .setDescription("Hug someone.")
    .addUserOption((option) =>
        option.setName("user").setDescription("Select a user")
              .setRequired(true)
    ),

  async execute(client, interaction) {
    const { member, options, user } = interaction;

    let target = options.getUser("user") || user;
    let author = interaction.member;

    let canvas = `https://some-random-api.com/animu/hug`;
  
    let embed = new EmbedBuilder()
      .setImage(canvas)
      .setDescription(`${author} has hugged ${target}!`)
      .setColor('#2B2D31')
      .setTimestamp()
      .setFooter({ text: `Requested by ${member.user.tag}`, iconURL: member.displayAvatarURL() });
  
    await interaction.reply({ embeds:  });
  },
};

I copy the link i receive from https://some-random-api.com/animu/hug onto the canvas section of my code however it only generates the same gif it printed out and i copied. If i use the link from the actual endpoint, no gif shows up.

>Solution :

You can’t directly use the endpoint link to fetch the gif, you need to do an actual request, you need to retrieve a JSON format from the query, when you go to the endpoint you can actually see the JSON with the key "link".

try with this :

let response = await fetch("https://some-random-api.com/animu/hug");
let dataJSON = await.response.json();
let canvas = dataJSON.link;

Note that you will need node-fetch (npm install node-fetch).