I have tried several things, there is something I certainly not looking, so the next filter recieve a array with Articles, and a array of categories id, so the filter needs to look inside the array for the categories provided in the categories array and push in a variable array all the founds:
const filterArticlesByCategory = (articlesData, selectedCategories) => {
// If no categories are selected, return all articles
if (!selectedCategories || selectedCategories.length === 0) {
return articlesData;
}
// Convert selected categories to strings if necessary
const selectedCategoriesStr = selectedCategories.map(String);
// Array to hold filtered articles
const filteredArticles = [];
for (const article of articlesData) {
// Convert article categories to strings
const articleCategoriesStr = article.categories.map(String);
// Check if any of the article categories match any of the selected categories
if (articleCategoriesStr.some(category => selectedCategoriesStr.includes(category))) {
filteredArticles.push(article);
}
}
console.log(selectedCategories);
console.log(filteredArticles);
formatPost(filteredArticles);
return filteredArticles;
};
I noticed for example that the id coming in the array of articles is a string and not a number, at the beginning hat this issue and solved, or at least I think, now I am getting a result but for example if my categories array looks like [7, 5]. When filtering I am only getting the posts which contains the id 7 but not the ones with id 5. And just in any case someone ask, there is always articles for each categories.
So my array of articlesData looks like(just a example because is very long):
[
{
"id": 1290,
"date": "2024-06-10T14:37:12",
"date_gmt": "2024-06-10T12:37:12",
"guid": {
"rendered": "http://localhost/?p=1290"
},
"modified": "2024-06-11T08:28:43",
"modified_gmt": "2024-06-11T06:28:43",
"slug": "nvidunt-ut-labore-et-dolore-magna-aliquyam-erat",
"status": "publish",
"type": "post",
"link": "http://localhost/2024/06/10/nvidunt-ut-labore-et-dolore-magna-aliquyam-erat/",
"title": {
"rendered": "Nvidunt ut labore et dolore magna aliquyam erat."
},
"content": {
"rendered": "n<div class="wp-block-text-media"><div class="text-media g"><div class="text-media__side"><div class="text-media__table-content-container"></div></div><div class="text-media__content"><div class="headline ">n <h2>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</ h2>n</div>nnnnn<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>nnn<div class="headline ">n <h2>At vero eos et accusam et justo duo dolores et ea rebum</ h2>n</div>nnnnn<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>nnnn<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="682" src="https://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d-1024x682.jpg" alt="" class="wp-image-495" srcset="http://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d-1024x682.jpg 1024w, http://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d-300x200.jpg 300w, http://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d-768x512.jpg 768w, http://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d-1536x1024.jpg 1536w, http://localhost/content/uploads/2024/04/d4b731c9d5a60429804bd1d48075f14d.jpg 1880w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>n</div></div></div>n",
"protected": false
},
"excerpt": {
"rendered": "",
"protected": false
},
"author": 1,
"featured_media": 343,
"comment_status": "closed",
"ping_status": "closed",
"sticky": false,
"template": "",
"format": "standard",
"meta": {
"_acf_changed": false,
"footnotes": ""
},
"categories": [
1
],
"tags": [],
"acf": {
"reading_time": ""
},
"lang": "de",
"translations": {
"de": 1290
},
"pll_sync_post": [],
"_links": {
"self": [
{
"href": "https://localhost/posts/1290"
}
],
"collection": [
{
"href": "https://localhost/posts"
}
],
"about": [
{
"href": "https://localhost/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "https://localhost/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "https://localhost/comments?post=1290"
}
],
"version-history": [
{
"count": 3,
"href": "https://localhost/posts/1290/revisions"
}
],
"predecessor-version": [
{
"id": 1301,
"href": "https://localhost/posts/1290/revisions/1301"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "https://localhost/media/343"
}
],
"wp:attachment": [
{
"href": "https://localhost/media?parent=1290"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "https://localhost/categories?post=1290"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "https://localhost/tags?post=1290"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
},
{
"id": 1286,
"date": "2024-06-10T14:35:06",
"date_gmt": "2024-06-10T12:35:06",
"guid": {
"rendered": "http://localhost/?p=1286"
},
"modified": "2024-06-11T08:30:17",
"modified_gmt": "2024-06-11T06:30:17",
"slug": "lorem-ipsum-dolor-sit-amet-consetetur-sadipscing",
"status": "publish",
"type": "post",
"link": "http://localhost/2024/06/10/lorem-ipsum-dolor-sit-amet-consetetur-sadipscing/",
"title": {
"rendered": "Lorem ipsum dolor sit amet, consetetur sadipscing"
},
"content": {
"rendered": "n<p></p>nnnn<div class="wp-block-text-media"><div class="text-media g"><div class="text-media__side"><div class="text-media__table-content-container"></div></div><div class="text-media__content">n<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>nnnn<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>nnn<div class="headline ">n <h2>Ist ein unterschiedliches Bedürfnis nach Sex normal?</ h2>n</div>nnnnn<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>n</div></div></div>n",
"protected": false
},
"excerpt": {
"rendered": "",
"protected": false
},
"author": 1,
"featured_media": 313,
"comment_status": "closed",
"ping_status": "closed",
"sticky": false,
"template": "",
"format": "standard",
"meta": {
"_acf_changed": false,
"footnotes": ""
},
"categories": [
7
],
"tags": [],
"acf": {
"reading_time": ""
},
"lang": "de",
"translations": {
"de": 1286
},
"pll_sync_post": [],
"_links": {
"self": [
{
"href": "https://localhost/posts/1286"
}
],
"collection": [
{
"href": "https://localhost/posts"
}
],
"about": [
{
"href": "https://localhost/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "https://localhost/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "https://localhost/comments?post=1286"
}
],
"version-history": [
{
"count": 2,
"href": "https://localhost/posts/1286/revisions"
}
],
"predecessor-version": [
{
"id": 1303,
"href": "https://localhost/posts/1286/revisions/1303"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "https://localhost/media/313"
}
],
"wp:attachment": [
{
"href": "https://localhost/media?parent=1286"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "https://localhost/categories?post=1286"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "https://localhost/tags?post=1286"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
},
{
"id": 1284,
"date": "2024-06-10T14:34:25",
"date_gmt": "2024-06-10T12:34:25",
"guid": {
"rendered": "http://localhost/?p=1284"
},
"modified": "2024-06-11T14:29:30",
"modified_gmt": "2024-06-11T12:29:30",
"slug": "at-vero-eos-et-accusam-et-justo-duo-dolores-et-ea-rebum-2",
"status": "publish",
"type": "post",
"link": "http://localhost/2024/06/10/at-vero-eos-et-accusam-et-justo-duo-dolores-et-ea-rebum-2/",
"title": {
"rendered": "At vero eos et accusam et justo duo dolores et ea rebum"
},
"content": {
"rendered": "n<div class="wp-block-text-media"><div class="text-media g"><div class="text-media__side"><div class="text-media__table-content-container"></div></div><div class="text-media__content">n<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>nnn<div class="headline ">n <h2>Ist ein unterschiedliches Bedürfnis nach Sex normal?</ h2>n</div>nnnnn<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>n</div></div></div>n",
"protected": false
},
"excerpt": {
"rendered": "",
"protected": false
},
"author": 1,
"featured_media": 1218,
"comment_status": "closed",
"ping_status": "closed",
"sticky": false,
"template": "",
"format": "standard",
"meta": {
"_acf_changed": false,
"footnotes": ""
},
"categories": [
1
],
"tags": [],
"acf": {
"reading_time": ""
},
"lang": "de",
"translations": {
"de": 1284
},
"pll_sync_post": [],
"_links": {
"self": [
{
"href": "https://localhost/posts/1284"
}
],
"collection": [
{
"href": "https://localhost/posts"
}
],
"about": [
{
"href": "https://localhost/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "https://localhost/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "https://localhost/comments?post=1284"
}
],
"version-history": [
{
"count": 3,
"href": "https://localhost/posts/1284/revisions"
}
],
"predecessor-version": [
{
"id": 1328,
"href": "https://localhost/posts/1284/revisions/1328"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "https://localhost/media/1218"
}
],
"wp:attachment": [
{
"href": "https://localhost/media?parent=1284"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "https://localhost/categories?post=1284"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "https://localhost/tags?post=1284"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
}
]
and just in case selectedCategories looks like:
[
"1",
"7"
]
Can someone dive me an idea of what’s going on? Thank you in advance for reading me