Tenemos una array de objetos y en cada objeto hay una clave llamada id y cuyo valor es un número.
Ejemplo:
const arr = [
{
'id' : 12,
'name' : 'Ram'
},
{
'id' : 32,
'name' : 'Shyam'
}
]
Queremos encontrar el valor de la propiedad de nombre cuyo número de identificación es n .
Ejemplo :
Input : 12 Output : Ram Input : 32 Output : Shyam
Hay muchos enfoques para resolver este problema que están siguiendo
- Usando Array.filter()
- Usando Array.find()
- Usar bucles en JavaScript
Usando Array.filter( ) El método Array.filter( ) se usa para crear una nueva array a partir de una array existente después de aplicar algunas condiciones.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Geeksforgeeks</h1>
<p>Name of the id is :
<span id="geeks"></span>
</p>
<script>
// This is our array of Objects
var data = [
{ id: 1, name: "a" },
{ id: 2, name: "b" },
{ id: 3, name: "c" },
{ id: 4, name: "d" },
{ id: 5, name: "e" },
{ id: 6, name: "f" },
];
let idYouWant = 1;
let propertyYouWant = "name";
// Using Array.filter( ) method
// we are iterating through each
// items in the array and
// checking which item's
// id value is equal to the id we want
let res = data.filter((item) => {
return item.id == idYouWant;
});
// After using filter method we got an array
// of object. Now take its first element and
// use its 'propertyYouWant' key
let exactRes = res[0][propertyYouWant];
// Printing the property we want
document.getElementById("geeks").innerText = exactRes;
</script>
</body>
</html>
Producción:
Usando Array.find(): Usando Array.find() primero buscamos en qué objeto existe la identificación dada, luego extraemos la propiedad de nombre de ese objeto.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Geeksforgeeks</h1>
<p>Name of the id is :
<span id="geeks"></span>
</p>
<script>
// This is our array of Objects
var data = [
{ id: 1, name: "a" },
{ id: 2, name: "b" },
{ id: 3, name: "c" },
{ id: 4, name: "d" },
{ id: 5, name: "e" },
{ id: 6, name: "f" },
];
let idYouWant = 2;
let propertyYouWant = "name";
// Using Array.find( ) we are searching
// in which object our searching id present
let res = data.find((item) => {
return item.id == idYouWant;
});
// Now print the property which you want from
// the object res console.log(res[propertyYouWant])
document.getElementById("geeks").innerText =
res[propertyYouWant];
</script>
</body>
</html>
Producción:
Usando for loop Usando for loop primero estamos iterando la array y buscando en qué objeto está presente la identificación dada y después de eso, estamos imprimiendo la propiedad que queríamos.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Geeksforgeeks</h1>
<p>Name of the id is :
<span id="geeks"></span>
</p>
<script>
// This is our array of objects
var data = [
{ id: 1, name: "a" },
{ id: 2, name: "b" },
{ id: 3, name: "c" },
{ id: 4, name: "d" },
{ id: 5, name: "e" },
{ id: 6, name: "f" },
];
let idYouWant = 4;
let propertyYouWant = "name";
// Iterating over the array using for loop and
// searching in which object the id present
// After getting the object we print the
// property we wanted from the object
for (var i = 0; i < data.length; i++) {
if (data[i].id == idYouWant) {
// console.log(data[i][propertyYouWant])
document.getElementById("geeks").innerText =
data[i][propertyYouWant];
}
}
</script>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA