Comment parcourir en boucle un tableau contenant des objets et accéder à leurs propriétés
Je veux parcourir les objets contenus dans un tableau et changer les propriétés de chacun. Si je fais ça:
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j]);
}
La console doit afficher tous les objets du tableau, non? Mais en fait, il n’affiche que le premier objet. si je console enregistre le tableau en dehors de la boucle, tous les objets apparaissent alors il y a définitivement plus à l'intérieur.
Quoi qu'il en soit, voici le problème suivant. Comment accéder, par exemple, Object1.x dans le tableau, à l'aide de la boucle?
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j.x]);
}
Cela retourne "indéfini". Encore une fois, le journal de la console en dehors de la boucle me dit que les objets ont tous la valeur "x". Comment accéder à ces propriétés dans la boucle?
On m'a recommandé ailleurs d'utiliser des tableaux distincts pour chacune des propriétés, mais je veux m'assurer que j'ai épuisé cette avenue en premier.
Je vous remercie!
Utilisez forEach c'est une fonction de tableau intégrée. Array.forEach() :
yourArray.forEach(function (arrayItem) {
var x = arrayItem.prop1 + 2;
console.log(x);
});
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
Dans ECMAScript 2015, également appelé ES6, vous pouvez utiliser un pour..de boucle pour effectuer une boucle sur un tableau d'objets.
for (let item of items) {
console.log(item); // Will display contents of the object inside the array
}
Au moment de publier cette réponse, la prise en charge d'Internet Explorer est quasi inexistante, mais grâce à l'utilisation d'un transpiler tel que Traceur ou Babel, vous pouvez utiliser de nouvelles fonctionnalités Javascript comme celle-ci sans avoir à vous soucier de ce que les navigateurs supportent.
Quelques cas d'utilisation de la boucle dans un tableau de la manière fonctionnelle de la programmation en JavaScript:
1. Passez en boucle dans un tableau
const myArray = [{x:100}, {x:200}, {x:300}];
myArray.forEach((element, index, array) => {
console.log(element.x); // 100, 200, 300
console.log(index); // 0, 1, 2
console.log(array); // same myArray object 3 times
});
Remarque: Array.prototype.forEach () n'est pas une manière fonctionnelle à proprement parler, car la fonction utilisée en tant que paramètre d'entrée n'est pas censée renvoyer une valeur, qui ne peut donc être considérée comme une fonction pure.
2. Vérifier si l'un des éléments d'un tableau passe un test
const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},
{name: 'Adam', age: 37}];
const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true
3. Transformer en un nouveau tableau
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]
Remarque: La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
4. Résumer une propriété particulière et calculer sa moyenne
const myArray = [{x:100}, {x:200}, {x:300}];
const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300
const average = sum / myArray.length;
console.log(average); // 200
5. Créer un nouveau tableau basé sur l'original mais sans le modifier
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => {
return {
...element,
x: element.x * 2
};
});
console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]
6. Compter le nombre de chaque catégorie
const people = [
{name: 'John', group: 'A'},
{name: 'Andrew', group: 'C'},
{name: 'Peter', group: 'A'},
{name: 'James', group: 'B'},
{name: 'Hanna', group: 'A'},
{name: 'Adam', group: 'B'}];
const groupInfo = people.reduce((groups, person) => {
const {A = 0, B = 0, C = 0} = groups;
if (person.group === 'A') {
return {...groups, A: A + 1};
} else if (person.group === 'B') {
return {...groups, B: B + 1};
} else {
return {...groups, C: C + 1};
}
}, {});
console.log(groupInfo); // {A: 3, C: 1, B: 2}
7. Récupérer un sous-ensemble d'un tableau en fonction de critères particuliers
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]
Remarque: La méthode filter () crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.
8. Trier un tableau
const people = [
{ name: "John", age: 21 },
{ name: "Peter", age: 31 },
{ name: "Andrew", age: 29 },
{ name: "Thomas", age: 25 }
];
let sortByAge = people.sort(function (p1, p2) {
return p1.age - p2.age;
});
console.log(sortByAge);
9. Trouver un élément dans un tableau
const people = [ {name: "john", age:23},
{name: "john", age:43},
{name: "jim", age:101},
{name: "bob", age:67} ];
const john = people.find(person => person.name === 'john');
console.log(john);
La méthode Array.prototype.find () renvoie la valeur du premier élément du tableau satisfaisant la fonction de test fournie.
Références
Voici un exemple sur la façon dont vous pouvez le faire :)
var students = [
{
name : "Mike",
track: "track-a",
achievements: 23,
points : 400,
},
{
name : "james",
track: "track-a",
achievements: 2,
points : 21,
},
]
students.forEach(myFunction);
function myFunction (item, index) {
for( var key in item ) {
console.log(item[key])
}
}
myArray[j.x] est logiquement incorrect.
Utilisez (myArray[j].x); à la place
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
Boucler à travers un tableau d'objets est une fonctionnalité assez fondamentale. C'est ce qui fonctionne pour moi.
var person = [];
person[0] = {
firstName : "John",
lastName : "Doe",
age : 60
};
var i, item;
for (i = 0; i < person.length; i++) {
for (item in person[i]) {
document.write(item + ": " + person[i][item] + "<br>");
}
}
Cela fonctionnerait. En boucle complète tableau (yourArray). Puis parcourez les propriétés directes de chaque objet (eachObj).
yourArray.forEach( function (eachObj){
for (var key in eachObj) {
if (eachObj.hasOwnProperty(key)){
console.log(key,eachObj[key]);
}
}
});
C'est vraiment simple en utilisant la méthode forEach depuis ES5 +. Vous pouvez modifier directement chaque propriété de chaque objet de votre tableau.
myArray.forEach(function (arrayElem){
arrayElem = newPropertyValue;
});
Si vous souhaitez accéder à une propriété spécifique sur chaque objet:
myArray.forEach(function (arrayElem){
arrayElem.nameOfYourProperty = newPropertyValue;
});
Voici une autre façon de parcourir un tableau d'objets (vous devez inclure la bibliothèque jQuery dans votre document pour ces éléments).
$.each(array, function(element) {
// do some operations with each element...
});
Itération d'objet de tableau, en utilisant jQuery, (Utilisez le deuxième paramètre pour imprimer la chaîne).
$.each(array, function(index, item) {
console.log(index, item);
});
La réponse acceptée utilise la fonction normale. Donc, poster le même code avec une légère modification en utilisant la fonction de flèche sur forEach
yourArray.forEach(arrayItem => {
var x = arrayItem.prop1 + 2;
console.log(x);
});
Également dans $ .each, vous pouvez utiliser la fonction de flèche comme ci-dessous
$.each(array, (item, index) => {
console.log(index, item);
});
var c = {
myProperty: [
{ name: 'this' },
{ name: 'can' },
{ name: 'get' },
{ name: 'crazy' }
]
};
c.myProperty.forEach(function(myProperty_element) {
var x = myProperty_element.name;
console.log('the name of the member is : ' + x);
})C’est l’un des moyens par lesquels j’ai pu y parvenir.
const person = [
{
name: "sipher",
family: "sipherplus",
job: "Devops"
},
{
name: "john",
family: "Doe",
job: "Devops"
},
{
name: "jim",
family: "smith",
job: "Devops"
}
];
const txt =
<ul>
${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
</ul>
;
document.body.innerHTML = txt;
Attention aux tiques de dos (``)