El método filter() crea una nueva array con todos los elementos que pasan la prueba implementada por la función proporcionada.
Enfoque 1: este enfoque utiliza el método filter() para filtrar el objeto anidado en JavaScript.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Output</h2>
<p id="Output"></p>
<script>
var nestedObject = [
{
itemId: 1,
itemDetails: {
name: "C",
caregory: "Programming Language",
price: 500,
},
itemCategory: "Basic",
},
{
itemId: 2,
itemDetails: {
name: "C++",
caregory: "Programming Language",
price: 700,
},
itemCategory: "Beginner",
},
{
itemId: 1,
itemDetails: {
name: "Java Script",
caregory: "Web Development",
price: 1500,
},
itemCategory: "Advanced",
}]
let itemNames = nestedObject.filter(
eachObj => eachObj.itemDetails.price === 1500);
document.getElementById("Output").innerHTML
= JSON.stringify(itemNames);
</script>
</body>
</html>
Producción:
En el ejemplo anterior, solo «JavaScript» es el nombre del curso con precio «1500».
Enfoque 2: este enfoque utiliza el método some() para filtrar los objetos anidados. El método some() prueba si al menos un elemento de la array pasa la prueba implementada por la función proporcionada. Devuelve un valor booleano .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Output</h2>
<p id="Output"></p>
<script>
const fruitData = [
{
name: "Apples",
details: [
{
fruitId: '1',
gradingDetails: [{ grade: 'A' }]
},
{
fruitId: '2',
gradingDetails: [{ grade: 'B' }]
}
]
},
{
name: "Oranges",
details: [
{
fruitId: '3',
gradingDetails: [{ grade: 'B' }]
},
{
fruitId: '4',
gradingDetails: [{ grade: 'D' }]
}
]
},
];
let output = fruitData.filter(eachVal => {
let opt = eachVal.details.some((
{ gradingDetails }) => gradingDetails
.some(({ grade }) => grade === 'A'));
return opt;
})
console.log(output);
document.getElementById("Output").innerHTML =
JSON.stringify(output);
</script>
</body>
</html>
Producción:
En el ejemplo anterior, el fruitId es 1 para «Apples» y el grado es «A». Pero para Naranjas ninguno de los dos satisface la opción.
Publicación traducida automáticamente
Artículo escrito por PrasannaReddyIsireddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA