Check, if in .map (), that object exists in another array React - reactjs

How can I see in the map of products if that product is in the favorites?
Log of products
[
{id: 1, product_name: “product one”},
{id: 2, product_name: “product two”},
{id: 3, product_name: “product three”}
]
Log of favorites
[
{id: 1, product_name: “product one”},
{id: 2, product_name: “product two”}
]
{products.map((item} =>
// Here, if the product is in the favorites list then show x else show y
// I need to check here if the product is in the favorites list, to show two different types of icons
)
I don’t know how to do, I also tried to map to favorites with product id = favorite product id, but it didn't work

var products = [{
id: 1,
product_name: 'product one'
},
{
id: 2,
product_name: 'product two'
},
{
id: 3,
product_name: 'product three'
}
]
var favorites = [{
id: 1,
product_name: 'product one'
},
{
id: 2,
product_name: 'product two'
}
]
const solution = products.map((product)=>{
return favorites.find(el=>el.product_name === product.product_name) ? 'x' : 'y'
})

Related

merge and display array of object data in table using react js

I need to merge array1 and array2 , display in a table
array1= [ {id: 1,event:party, oldcity: Singapore}
{id: 2, event:fest,oldcity:Paris }]
array2= [ {id: 1,event:party, newcity: bombay}
{id: 2, event:fest,newcity:madras }]
output of merge array
mergearray= [ {id: 1,event:party,oldcity: Singapore,newcity: bombay}
{id: 2, event:fest,oldcity:Paris,newcity:madras }]
display mergearray in table
id event oldcity newcity
1 party singapore bombay
2 fest paris madras
if i merge the array
mergearray[{id: 1,event:party, oldcity: Singapore}
{id: 2, event:fest,oldcity:Paris }
{id: 1,event:party, newcity: bombay }
{id: 2, event:fest,newcity:madras }]
but am expecting to be like this
mergearray= [ {id: 1,event:party,oldcity: Singapore,newcity: bombay}
{id: 2, event:fest,oldcity:Paris,newcity:madras }]
How do you merge the arrays ?
const array1 = [{
id: 1,
event: 'party',
oldcity: 'Singapore'
}, {
id: 2,
event: 'fest',
oldcity: 'Paris'
}];
const array2 = [{
id: 1,
event: 'party',
newcity: 'bombay'
}, {
id: 2,
event: 'fest',
newcity: 'madras'
}];
// I would merge arrays this way
const mergedArray = [...array1, ...array2];
console.log('mergedArray: ', mergedArray);

Angular filter array inside array

I'm working in an Angular 9 app and I need to filter an array based on another array inside each object. To understand me here is an example of the array
const products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 3',
origins: [
{ quantity: 1, name: 'Inventory' },
{ quantity: 1, name: 'Pack 5' },
]
}
]
So I got a filter input which has to filter the products by a coincidence on the name of the product or one or more origin's name.
For example, if I type "2" the result array must be:
products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
}
]
Because the character "2" is in the name of origin of Product 1 and Product 2, also is present in the name "Product 2"
I tried many things to do this but the result array always modifies my original array when I put this in a pipe
<input type="text" [(ngModel)]="searchtext">
<div *ngFor="let p of (saleProducts | filter : searchtext); let i = index">
{{ p.name }}
<div *ngIf="p.origins.length > 0">
<div *ngFor="let o of p.origins">
{{ o.name }}
</div>
</div>
</div>
What is the best (simple and optimized) way to filter this using a pipe without modifying the original array?
below a pipe implementation to with a default key origins:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any[], searchName: string, key = 'origins'): any[] {
const products = []
value.forEach(product => {
const matches = product[key].filter(({ name }) => name === searchName)
if (matches.length) {
products.push({ ...product, [key]: matches })
}
})
return products
}
}

Get filtered array by some with multiple conditions

This is the structure of my arrays:-
projects array:-
let projects = [
{
id: 1,
name: 'Project 1',
techs: [
id: 1
name: 'Tech 1'
]
},
{
id: 2,
name: 'Project 2',
techs: [
id: 1
name: 'Tech 2'
]
},
{
id: 3,
name: 'Project 3',
techs: [
id: 1
name: 'Tech 3'
]
},
{
id: 4,
name: 'Project 4',
techs: [
id: 1
name: 'Tech 1'
]
}
]
Right now I'm able to get only filtered projects of just Tech 1 as shown below:-
let filteredProjs = projects.filter(proj => proj.techs.some(tech => tech.name === 'Tech 1'))
I want to get filtered projects of Tech name = 'Tech 1' & 'Tech 2'. But it return me nothing when I did as shown below:-
let filteredProjs = projects.filter(proj => proj.techs.some(tech => tech.name === 'Tech 1' && tech.name === 'Tech 2'))
How can I do this?
You might need to try OR operator (||) instead of AND (&&).
In Computer Programming, AND returns true only when conditions on both the sides evaluates to true.
In case of OR, it evaluates to true if either of the conditions on any side returns true.
In your case I assume you want to filter out projects in which Tech name equals 'Tech 1' OR 'Tech 2'.

How can i check additional category exist when mapping this array in react js?

Here, SubCategoryDetail contains Additional Category but SubCategoryDetail may not have an Additional Category. I need to check where the Additional Category exists then go to the AdditionalCategoryDetail option if not exist then show SubCategoryDetail products when I'm mapping this array.
categoryDetail: [
{
id: 0,
SubCategoryName: "Sewing Section",
SubCategoryDetail: [
{
id: 0,
AdditionalCategoryName: "Additional Category Name 0",
AdditionalCategoryDetail: [
{
id: 0,
ProductName: 'Product Name 0',
ProductImg: "images/AllCategories/SubCategories/3.png",
Price: '80.00',
Brand: 'Brand'
},
{
id: 1,
ProductName: 'Product Name 1',
ProductImg: "images/AllCategories/SubCategories/4.png",
Price: '70.00',
Brand: 'Brand'
}]
}]
},
{
id: 1,
SubCategoryName: "Cutting Section",
SubCategoryDetail: [
{
id: 0,
ProductName: 'Product Name 0',
ProductImg: "images/AllCategories/SubCategories/2.png",
Price: '100.00',
Brand: 'Brand'
},
{
id: 1,
ProductName: 'Product Name 1',
ProductImg: "images/AllCategories/SubCategories/2.png",
Price: '100.00',
Brand: 'Brand'
}
]
}
]
}
]
You can do something like this.
results = categoryDetail.map(categories => {
return categories.SubCategoryDetail.map(category => {
if (category.hasOwnProperty("AdditionalCategoryDetail")) {
return category.AdditionalCategoryDetail[0]
} else {
return category[0]
}
})[0]
})

How to get transform from object to specific key value pair using lodash?

Products: [
{_id: 'xx1', name: 'p1', sku: 's1'},
{_id: 'xx2', name: 'p2', sku: 's2'},
{_id: 'xx3', name: 'p3', sku: 's3'}
]
I want to replace word '_id' with 'product', and to map to below result:
productArray = [ {product: 'xx1'}, {product: 'xx2'}, {product: 'xx3'} ];
I tried lodash code something like below but it just doesn't seem to work correctly:
let productArray = _.map(Products, '_id');
Can anyone help me on this? Thank you
Why would you even need to use lodash? Map will easily do the job.
const products = [{
_id: 'xx1',
name: 'p1',
sku: 's1'
},
{
_id: 'xx2',
name: 'p2',
sku: 's2'
},
{
_id: 'xx3',
name: 'p3',
sku: 's3'
}
];
const outProducts = products.map(x => {
return {
product: x._id
}
});
console.log(outProducts);

Resources