I have an array named x like below.
x = [
{ id: 1, content: 'abc' },
{ id: 2, content: 'cde' },
{ id: 3, content: 'xyz' }
]
I have another array y like this.
y = [1, 3]
I want to fetch all data from x by mapping the id of x to the values in y.
So my output will be like below.
[
{ content: 'abc' },
{ content: 'xyz' }
]
How can I achieve this in Javascript?
You can use array.filter (+ some to comare with other array) along with array.map
let x=[
{id: 1, content:'abc'},
{id: 2, content:'cde'},
{id: 3, content:'xyz'}];
let y=[1,3];
let result = x.filter(obj => y.some(yy => yy === obj.id)).map(({content}) => ({content}));
console.log(result);
//or
let result2 = x.filter(obj => y.some(yy => yy === obj.id)).map(x => x.content);
console.log(result2);you can use array reduce for that:
const x = [ { id: 1, content: 'abc' }
, { id: 2, content: 'cde' }
, { id: 3, content: 'xyz' }
]
const y = [ 1, 3 ]
const result = x.reduce((a,{id,content})=> {
if (y.some(eY=>eY=== id)) a.push({ content } )
return a
},[])
console.log( result )A for-loop can be used to extract elements with matching IDs.
Here is a working demo using a for loop:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<button onclick="myFunction()">Find elements</button>
<p id="result"></p>
<script>
var x = [
{id: 1, content:'abc'},
{id: 2, content:'cde'},
{id: 3, content:'xyz'}
]
var y = [1, 3]
var result = []
function myFunction() {
for(let i = 0; i < x.length; i++) {
if( y.indexOf(x[i].id) >= 0 ) {
// Add content of matching elements to result array
result.push(x[i].content)
}
}
document.getElementById("result").innerHTML = result
}
</script>
</body>
</html>
Output:
Using Array.filter() and Array.map() you can get the results.
Suppose:
const x = [
{id: 1, content:'abc'},
{id: 2, content:'cde'},
{id: 3, content:'xyz'},
];
const y = [1,3];
const result = x.filter(item => y.includes(item.id)).map(item => {
return {
content: item.content
}
});
console.log(result);
Output:
{content:'abc'}
{content:'xyz'}
