Как l oop над массивом и найти часть, которая включена в элемент, а не весь элемент? - PullRequest
0 голосов
/ 03 апреля 2020

Я создаю приложение погоды, поэтому мне нужно получить значок, соответствующий вызову из API. Я использую посылку и сбрасывает все изображения в папке dist. Я импортирую все изображения, и это дает мне объект, который я преобразовал в одномерный массив. Поскольку Parcel дает дополнительный текст, я не могу получить правильное изображение. Это массив, который я вижу:

[0: "/01d.b9bbb2b9.svg" 1: "/01n.2290e7c6.svg" 2: "/02d.ac486e56.svg" 3: "/02n.259589cf.svg"]

<img src="${result.weather.icon}" alt="" class="weather--icon" />//I like to render it like this.

Есть ли способ, которым я могу l oop по массиву и получить только значок, который соответствует result.weather.icon ??? Мне нужно найти только 01d или 02d из массива.

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Не совсем понятно, о чем вы спрашиваете - потому что [0: "/01d.b9bbb2b9.svg" 1: "/01n.2290e7c6.svg" 2: "/02d.ac486e56.svg" 3: "/02n.259589cf.svg"] не является допустимым массивом.

Однако, если ваш массив - это просто текстовые элементы, тогда вы можете просто использовать find. т.е.

let data = ["/01d.b9bbb2b9.svg", "/01n.2290e7c6.svg", "/02d.ac486e56.svg", "/02n.259589cf.svg"];

let result = data.find(x => x.startsWith('/01d'));

console.log(result);

Здесь find лучше, чем filter, так как find возвращает первое значение, соответствующее из коллекции. Как только он совпадет со значением в результатах, он не будет проверять оставшиеся значения.

0 голосов
/ 03 апреля 2020

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter позволяет выполнить l oop через массив и проверить его значения на соответствие условию. Затем он вернет только те значения, которые прошли этот тест.

const array = [   "/01d.b9bbb2b9.svg", "/01n.2290e7c6.svg", "/02d.ac486e56.svg", "/02n.259589cf.svg"
];

const targetVal = '01d';

const filteredArray = array.filter(image => image.includes(targetVal)
);
...