Извлекать и фильтровать изображения в массиве по ширине значения поля

Question

Как я могу получить url, чтобы получить только изображение в массиве с width: 2048?В качестве альтернативы, возможно, проще будет каждое требуемое изображение в конце filename TABLET_LANDSCAPE_LARGE_16_9.jpg

Я использую createRemoteFileNode в gatsby-node для импорта изображений в случайном порядке array из внешнегоAPI как

fileNode = await createRemoteFileNode({
  url: event.images.url,
  cache,
  store,
  createNode,
  createNodeId
});

, где event возвращается как

{ "events": [
   {
      "id": "177YvfG65Xi34_c",
      "images": [
         {
           "url": "///.jpg",
           "width": 305,
           "height": 203
         },
         {
           "url": "///.jpg",
           "width": 1024,
           "height": 683
         },
         {
           "url": "///.jpg",
           "width": 2048,
           "height": 1152
         }
      ]
   },
   {
      "id": "Z7r9jZ1AeC4_Y",
      "images": [
         {
           "url": "///.jpg",
           "width": 305,
           "height": 203
         },
         {
           "url": "///.jpg",
           "width": 2048,
           "height": 1152,
         },
         {
           "url": "///.jpg",
           "width": 1136,
           "height": 639,
         }
      ]
   }
]}

Мне нужен только url, который имеет width >= 1900, но url в array являются случайными, поэтому event.images[2].url может работать для первых events данных, но не для вторых.

---

Для тех, кому требуется дополнительная информация, вот полный код

const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
const axios = require('axios');

// Replace ACCESS_TOKEN with your Instagram token
const API_URI = `https://app.ticketmaster.com/discovery/v2/events.json?countryCode=AU&size=100&apikey=${API_KEY}`;

exports.sourceNodes = async ({ actions, store, cache, createNodeId }) => {
  const { createNode, createNodeField } = actions;
  // Fetch data
  const { data } = await axios.get(API_URI);

  // use for loop for async/await support
  for (const event of data._embedded.events) {
    let fileNode;
    try {
      fileNode = await createRemoteFileNode({
        url: event.images.url,
        cache,
        store,
        createNode,
        createNodeId
      });
    } catch (error) {
      console.warn('error creating node', error);
    }
  }
};

Answer 1

если ожидаемые вами результаты - это «события», вы можете попробовать это ... надеюсь, это поможет.

 const obj = {
    "events": [
      {
        "id": "177YvfG65Xi34_c",
        "images": [
          {
            "url": "///.jpg",
            "width": 305,
            "height": 203
          },
          {
            "url": "///.jpg",
            "width": 1024,
            "height": 683
          },
          {
            "url": "///.jpg",
            "width": 2048,
            "height": 1152
          }
        ]
      },
      {
        "id": "Z7r9jZ1AeC4_Y",
        "images": [
          {
            "url": "///.jpg",
            "width": 305,
            "height": 203
          },
          {
            "url": "///.jpg",
            "width": 2048,
            "height": 1152,
          },
          {
            "url": "///.jpg",
            "width": 1136,
            "height": 639,
          }
        ]
      }
    ]
  }

const events = obj.events;
let output = [];
events.forEach(elm => {
  let filterResults = elm.images.filter(e => e.width >= 1900);
  output.push([...filterResults]);
});

console.log(output);