How to get array based on same key value in javascript

Question

I have two object arrays obj1 and obj2 , how to get the array that matches key color-size of obj1 and model of obj2

Below function works, is there alternative way to do

getArrayByModel(obj1,obj2){
 return obj2.filter(o1 => obj1.some(o2 => o1.model=== (o2.color+ "-" + o2.size)));
}
console.log(this.getArrayByModel(obj1,obj2));
var obj1 = [
 { id:1, color:"blue",size:"m"}
]

var obj2 = [
 { idx:1, model:"blue-m", store:"111" },
 { idx:2, model:"blue-xs", store: "123"},
 { idx:3, model:"blue-m", store: "345"},
]

Expected Output

[
 { idx:1, model:"blue-m", store:"111" },
 { idx:3, model:"blue-m", store: "345"}
]

Answer 1

const getArrayByModel = (obj1,obj2) => obj2.filter(o1 => obj1.some(o2 => o1.model === [o2.color, o2.size].join('-')));

Answer 2

You can try to use map and filter methods like this:

 var obj1 = [ { id:1, color:"blue",size:"m"} ] var obj2 = [ { idx:1, model:"blue-m", store:"111" }, { idx:2, model:"blue-xs", store: "123"}, { idx:3, model:"blue-m", store: "345"}, ] var models = obj1.map(x => x.color + '-' + x.size); var arr = obj2.filter(x => models.indexOf(x.model) > -1); console.log(arr);

Answer 3

 var obj1 = [ { id:1, color:"blue", size:"m" }, { id:2, color:"navy", size:"xl" } ] var obj2 = [ { idx:1, model:"blue-m", store:"111" }, { idx:2, model:"blue-xs", store: "123"}, { idx:3, model:"blue-m", store: "345"}, { idx:4, model:"navy-xl", store: "456"}, ] var result = obj2.filter( ( {model, store} ) => { return obj1.map( ( {color, size} ) => [color, size].join("-")).includes( model ); } ); console.log(result);

Answer 4

Four alternatives, mostly overkill. But hey, you wanted to know if there were alternatives. The answer is yes. Don't try this at home;)

 const obj1 = [ { id:1, color:"blue",size:"m"} ] const obj2 = [ { idx:1, model:"blue-m", store:"111" }, { idx:2, model:"blue-xs", store: "123"}, { idx:3, model:"blue-m", store: "345"}, ] // split to compare const obj3 = obj2.filter(e => { let [color, model] = e.model.split("-"); return obj1[0].color === color && obj1[0].size === model; }); // split to compare one liner const obj3a = obj2.filter(e => `${e.model.split("-")}` === `${[obj1[0].color, obj1[0].size]}`); // reduce const obj4 = obj2.reduce( (a, e) => ( `${a.compare.color}-${a.compare.size}` === e.model? {...a, found: [...a.found, e] }: a ), {compare: obj1[0], found: []} ); // using the 'thisArg' const obj5 = obj2.filter( function(e) { return e.model === this[0]; }, [`${obj1[0].color}-${obj1[0].size}`] ); console.log(JSON.stringify(obj3)); console.log(JSON.stringify(obj3a)); console.log(JSON.stringify(obj4.found)); console.log(JSON.stringify(obj5));

Answer 5

Thank you for giving me a deeper understanding of reduce . prev cannot be written in the inner function

 var obj1 = [ { id: 1, color: "blue", size: "m" } ] var obj2 = [ { idx: 1, model: "blue-m", store: "111" }, { idx: 2, model: "blue-xs", store: "123" }, { idx: 3, model: "blue-m", store: "345" }, ] function getArrayByModel(obj1, obj2) { const newObj1 = JSON.parse(JSON.stringify(obj1)), newObj2 = JSON.parse(JSON.stringify(obj2)); return newObj1.reduce((prev, elem) => prev.concat(newObj2.filter((item) => item.model === `${elem.color}-${elem.size}` && elem )), []) } console.log(getArrayByModel(obj1, obj2));