How to filter fetched JSON data?-CodePudding

I'm trying to make a simple command that pulls info from imgur, finds the images, and from there randomly decides which photo to show. The problem I'm having is that I can't seem to filter the responses based on certain criteria. Here is the relevant code:

  async execute(interaction) {
    const data = await fetch(
      `https://imgur.com/r/${
        subreddits[Math.floor(Math.random() * subreddits.length)]
      }/hot.json`
    )
      .then((response) => response.json())
      .then((body) => body.data)

    const filtered = await data.filter(
      (element) => element.animated == "false"
    );
    console.log(filtered);
    const selected = data[Math.floor(Math.random() * data.length)];
    await interaction.reply({
      content: `https://imgur.com/${selected.hash}${selected.ext.replace(
        /\?.*/,
        ""
      )}`,
    });
  }

As you can see, I tried filtering the data based on the animated boolean that is present on each JSON element. False means it is not animated, hence it is an image. But the filtered value just returns an empty array []. I'm not sure why it's not passing all of the filtered (image) values as json data. Any help would be appreciated.

EDIT: Here is one of the multiple elements of JSON info that goes into data. Imagine this but 20x from different posts:

{
    id: 5987473707,
    hash: 'jV66SOE',
    author: 'RushVoidStaff',
    account_id: null,
    account_url: null,
    title: 'Meet these three brothers! Wheels, Judas and Porridge',
    score: 73947,
    size: 1015100,
    views: '111639',
    is_album: false,
    album_cover: null,
    album_cover_width: 0,
    album_cover_height: 0,
    mimetype: 'image/jpeg',
    ext: '.jpg',
    width: 2048,
    height: 1536,
    animated: false,
    looping: false,
    reddit: '/r/kittens/comments/dmtfvc/meet_these_three_brothers_wheels_judas_and/',
    subreddit: 'kittens',
    description: '#kittens #aww',
    create_datetime: '2019-10-25 06:31:29',
    bandwidth: '105.54 GB',
    timestamp: '2019-10-25 06:40:10',
    section: 'kittens',
    nsfw: false,
    prefer_video: false,
    video_source: null,
    video_host: null,
    num_images: 1,
    in_gallery: false,
    favorited: false,
    adConfig: {
      safeFlags: [Array],
      highRiskFlags: [],
      unsafeFlags: [],
      wallUnsafeFlags: [],
      showsAds: true
    }
  }

CodePudding user response：

The value in the JSON is false, not "false". Just replace == "false" with === false. The loose equals doesn't work on booleans as javascript sees "false" as a non-empty string, which gets converted to true.

CodePudding user response：

Never mix async/await and then/catch style while dealing with async programming. As both have different type of flow and different error handling as well. I think the code will work once all Then's are removed and we are using async/await only. Let me know if this works.

const response = await fetch(
    `https://imgur.com/r/${subreddits[Math.floor(Math.random() * subreddits.length)]
    }/hot.json`
);
let data = response.json().data;
const filtered = data.filter(
  (element) => element.animated == "false"
);