Comment parcourir un tableau contenant des objets et accéder à leurs propriétés

Je veux parcourir les objets contenus dans un tableau et modifier les propriétés de chacun. Si je fais ceci:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

La console devrait afficher tous les objets du tableau, non? Mais en fait, il n'affiche que le premier objet. si je console le journal du tableau en dehors de la boucle, tous les objets apparaissent donc il y en a certainement plus.

Quoi qu'il en soit, voici le problème suivant. Comment accéder, par exemple à Object1.x dans le tableau, en utilisant la boucle?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Cela renvoie «indéfini». Là encore, le journal de la console en dehors de la boucle me dit que les objets ont tous des valeurs pour "x". Comment accéder à ces propriétés dans la boucle?

On m'a recommandé ailleurs d'utiliser des tableaux séparés pour chacune des propriétés, mais je veux m'assurer que j'ai d'abord épuisé cette avenue.

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);
});

Quelques cas d'utilisation de bouclage à travers un tableau de la manière de la programmation fonctionnelle en JavaScript:

1. Faites une boucle sur 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 un moyen fonctionnel à proprement parler, car la fonction qu'il prend comme paramètre d'entrée n'est pas censée renvoyer une valeur, qui ne peut donc pas être considérée comme une fonction pure.

2. Vérifiez si l'un des éléments d'un tableau réussit 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. Transformez-vous 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. Faites la somme d'une propriété particulière et calculez 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éez 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. Comptez 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. Rechercher 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 qui satisfait la fonction de test fournie.

Références

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• Syntaxe de diffusion
• Array.prototype.find ()

Vous pouvez utiliser une boucle for..of pour boucler sur un tableau d'objets.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

L'une des meilleures choses à propos des for..ofboucles est qu'elles peuvent itérer sur plus que de simples tableaux. Vous pouvez parcourir n'importe quel type d'itérable, y compris les cartes et les objets. Assurez-vous d'utiliser un transpilateur ou quelque chose comme TypeScript si vous avez besoin de prendre en charge des navigateurs plus anciens.

Si vous souhaitez parcourir une carte, la syntaxe est en grande partie la même que celle ci-dessus, sauf qu'elle gère à la fois la clé et la valeur.

for (const [key, value] of items) {
  console.log(value);
}

J'utilise des for..ofboucles pour à peu près tous les types d'itérations que je fais en Javascript. De plus, l'une des choses les plus intéressantes est qu'ils fonctionnent également avec async / await.

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

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])
  }
}

Faire une boucle à 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>");
  }
}

myArray[j.x] est logiquement incorrect.

Utilisez (myArray[j].x);plutôt

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

C'est vraiment simple d'utiliser 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 d'itérer dans un tableau d'objets (vous devez inclure la bibliothèque jQuery dans votre document pour ceux-ci).

$.each(array, function(element) {
  // do some operations with each element... 
});

Cela fonctionnerait. Tableau complet en boucle (yourArray). Ensuite, 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]);
        }
    }
});

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);
});

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'une des façons dont j'ai pu y parvenir.

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);
 });

const jobs = [
    {
        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;

Faites attention aux tiques arrière (`)

Cela pourrait aider quelqu'un. C'est peut-être un bogue dans Node.

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

Cela ne fonctionne pas:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

Mais cela fonctionne ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

Cela fonctionne aussi ...

while ((arr[c]) && (arr[c].name)) { c++; }

MAIS inverser simplement l'ordre ne fonctionne pas. Je suppose qu'il y a une sorte d'optimisation interne ici qui brise Node.

while ((arr[c].name) && (arr[c])) { c++; }

L'erreur indique que le tableau n'est pas défini, mais ce n'est pas le cas: - / Node v11.15.0