Hello, guys! It’s my very first topic here, I already apologize for the long text
I’m struggling so much with a part of my code that uses filter() and a findIndex() as its test function…
I don’t really need a solution/code for the problem! I just need to understand how it works…
Maybe it’d be easier to understand my issue with a brief context, so here it is:
I just created a simple “weather app” that searches for a city name and gets the current weather info from the “openweathermap” API. The app is already running perfectly as I want, by the way.
Every time I make a request (searching for a city name), the API responds me with an array with up to 5 cities related to the search, then I pick the right city and make a new request getting the current weather conditions and show it… Pretty simple.
But I don’t know why, the API has some repeated cities, these repeated objects have the same values for “name”, “country” and “state”, but slightly different latitude and longitude (even though they still point to the same location/city).
In my app, if there is more than 1 city found, it shows a list of them for the user to choose one. So there’s no need to show repeated cities in the list, of course
In order to fix this, I searched for a way to filter an array of objects that removes the repeated ones. I found the answer by chance in a StackOverflow comment (there were no explanations… it was just 2 lines of code). But I used it here, and it really solved my problem!! Perfect…
But I didn’t want to simply solve the problem, I’d like to understand how that really works… I know it’s nothing so complex…
Here it is:
let jsonLocations2 = jsonLocations.filter((element, index, array) => {
return array.findIndex(item => item.name == element.name && item.country == element.country && item.state == element.state) == index;
});
So, the jsonLocations2 will be a new array without the repeated cities.
I think I know how filter() and findIndex() work, I’ve seen examples and explanations (at MDN Web doc and W3Schools, for example), but I can’t understand how the iteration is happening here
I uploaded here an example of repeated cities that I mentioned, and the filtered array right below.
So, let’s take this example:
jsonLocations = [
{city: 'aaaa', country: 'AA', state: 'aaaa'},
{city: 'aaaa', country: 'AA', state: 'aaaa'},
{city: 'aaaa', country: 'BB, state: 'bbb'},
{city: 'aaaa', country: 'CC', state: 'ccc'},
];
let jsonLocations2 = jsonLocations.filter((element, index, array) => {
return array.findIndex(item => item.name == element.name && item.country == element.country && item.state == element.state) == index;
});
On the first iteration of the filter() (element 0), it’s going to be returned true, since the first item checked of findIndex() will pass the conditions and it will be the same index as the current filter() element (0)… Good! Then findIndex() breaks and filter() goes to the second iteration.
On the second iteration of filter() (element 1), findIndex() starts checking the array again (item 0). It’ll be true for all the findIndex() conditions, but it won’t be returned to the filter() since the index found (0) is different from the index of the current element of filter (1). All good! So the findIndex() goes to check the next item of the array (1), correct?
And now the item (1) it’ll be true for all the conditions in findIndex() AND it’ll be also true for its index, because it’s the same as the current filter() index (1)!! Correct? So that element should be returned to the filter(), and go to the new array…? That’s how I understood it (but I’m wrong because it’s not what really happens…).
That’s all… I’m not sure about my explanation here, but I hope it makes sense!
Thanks for taking time to read and understand my long topic
If anyone could explain to me that process in a better way, I’d be very thankful!!