Comment puis-je parcourir ou énumérer un objet JavaScript?

Question

J'ai un objet JavaScript comme celui-ci:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Maintenant, je veux parcourir tous les éléments p (p1, p2, p3...) et obtenir leurs clés et valeurs. Comment puis je faire ça?

Je peux modifier l'objet JavaScript si nécessaire. Mon objectif ultime est de passer en revue certaines paires de valeurs clés et, si possible, d'éviter d'utiliser eval.

Answer 1

Vous pouvez utiliser la boucle for-in comme le montrent les autres. Cependant, vous devez également vous assurer que la clé obtenue est une propriété réelle d'un objet et ne provient pas du prototype.

Voici l'extrait:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

Answer 2

Sous ECMAScript 5, vous pouvez combiner Object.keys() et Array.prototype.forEach() :

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 ajoute for...of :

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 ajoute Object.entries() , ce qui évite de devoir rechercher chaque valeur dans l'objet d'origine:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

Object.keys() et Object.entries() itèrent les propriétés dans le même ordre qu'une boucle for...inmais ignoraient la chaîne de prototypes. Seules les propriétés énumérables propres à l'objet sont itérées.

Answer 3

Vous devez utiliser la boucle for-in

Mais soyez très prudent lorsque vous utilisez ce type de boucle, car cela bouclera toutes les propriétés de la chaîne de prototypes.

Par conséquent, lorsque vous utilisez des boucles for-in, utilisez toujours la méthode hasOwnProperty pour déterminer si la propriété en cours de l'itération est réellement une propriété de l'objet que vous vérifiez:

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

Answer 4

La question ne sera pas complète si nous ne mentionnons pas d'autres méthodes pour parcourir en boucle des objets.

De nos jours, de nombreuses bibliothèques JavaScript bien connues fournissent leurs propres méthodes d’itération sur des collections, c’est-à-dire sur tableaux, objets et objets de type tableau. Ces méthodes sont pratiques à utiliser et sont entièrement compatibles avec n’importe quel navigateur.

1. Si vous travaillez avec jQuery, vous pouvez utiliser jQuery.each() method. Il peut être utilisé pour effectuer une itération transparente sur les objets et les tableaux:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });
   

2. Dans Underscore.js, vous pouvez trouver la méthode _.each() , qui effectue une itération sur une liste d’éléments, chacun étant renvoyé à une fonction fournie (prêtez attention à l’ordre des arguments dans iteratee une fonction!):

   _.each(obj, function(value, key) {
       console.log(key, value);
   });
   

3. Lo-Dash fournit plusieurs méthodes pour parcourir les propriétés d'un objet. Basic _.forEach() (ou son alias _.each()) est utile pour parcourir en boucle les objets et les tableaux. Toutefois, les objets (!) Avec la propriété length sont traités comme des tableaux. Pour éviter ce problème, il est suggéré d'utiliser _.forIn() et _.forOwn() méthodes (celles-ci ont également l'argument value venant en premier):

   _.forIn(obj, function(value, key) {
       console.log(key, value);
   });
   

   _.forIn() itère sur propre et hérité propriétés énumérables d'un objet, alors que _.forOwn() itère uniquement sur propre propriétés d'un objet (vérifiant fondamentalement la fonction hasOwnProperty). Pour les objets simples et les littéraux d'objet, aucune de ces méthodes ne fonctionnera.

Généralement, toutes les méthodes décrites ont le même comportement avec les objets fournis. Outre l'utilisation de la boucle native for..in, plus rapide que toute abstraction, telle que jQuery.each(), ces méthodes sont considérablement plus faciles à utiliser, nécessitent moins de codage et permettent une meilleure gestion des erreurs.

Answer 5

Dans ECMAScript 5, vous avez une nouvelle approche dans les champs d’itération littéraux - Object.keys

Plus d'informations que vous pouvez voir sur MDN

Mon choix est une solution plus rapide dans les versions actuelles des navigateurs (Chrome30, IE10, FF25)

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

Vous pouvez comparer les performances de cette approche avec différentes implémentations sur jsperf.com :

• Étendre les implémentations
• Itération des clés d'objet
• itération littérale d'objet

Support du navigateur que vous pouvez voir sur La table des compatriotes de Kangax

Pour l'ancien navigateur, vous avez simple et complet polyfill

UPD:

comparaison des performances pour tous les cas les plus populaires dans cette question sur perfjs.info:

itération littérale d'objet

Answer 6

Vous pouvez simplement le parcourir comme ceci:

for (var key in p) {
  alert(p[key]);
}

Notez que key n'acceptera pas la valeur de la propriété, mais simplement une valeur d'index.

Answer 7

Préface:

• Les propriétés de l'objet peuvent être propre (la propriété est sur l'objet lui-même) ou hérité (pas sur l'objet lui-même, sur l'un de ses prototypes).
• Les propriétés de l'objet peuvent être énumérable _ ou non énumérable. Les propriétés non énumérables sont exclues de beaucoup d'énumérations/de tableaux de propriétés.
• Les noms de propriété peuvent être des chaînes ou des symboles. Les propriétés dont le nom est Symbols sont exclues de nombreuses énumérations/tableaux de propriétés.

Ici en 2018, vos options pour parcourir en boucle les propriétés d'un objet sont les suivantes:

1. for-in [ MDN , spec ] - Structure de boucle qui boucle les noms des propriétés énumérables d'un objet, y compris celles héritées, dont les noms sont des chaînes
2. Object.keys [ MDN , spec ] - Fonction fournissant un tableau des noms des objets propres _, énumérables dont les noms sont des ficelles.
3. Object.values [ MDN , spec ] - Une fonction fournissant un tableau des valeurs du propred'un objet} _, enumerable Propriétés.
4. Object.entries [ MDN , spec ] - Une fonction fournissant un tableau des noms et valeurs du propred'un objet} _, énumérable propriétés.
5. Object.getOwnPropertyNames [ MDN , spec ] - Fonction fournissant un tableau des noms des propriétés propres d'un objet (même non énumérables) dont les noms sont des cordes.
6. Object.getOwnPropertySymbols [ MDN , spec ] - Fonction fournissant un tableau des noms des propriétés propres d'un objet (même non énumérables) dont les noms sont Symboles.
7. Reflect.ownKeys [ MDN , spec ] - Fonction fournissant un tableau des noms des propriétés propres d'un objet (même non énumérables), qu'il s'agisse de les noms sont des chaînes ou des symboles.
8. Si vous voulez all des propriétés d'un objet, y compris celles héritées non énumérables, vous devez utiliser une boucle et Object.getPrototypeOf [ MDN , spec ] et utiliser Object.getOwnPropertyNames, Object.getOwnPropertySymbols ou Reflect.ownKeys sur chaque objet de la chaîne de prototypes (exemple au bas de cette réponse).

Avec tous sauf for-in, vous utiliseriez une sorte de construction en boucle sur le tableau (for, for-of, forEach, etc.).

Exemples:

for-in:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys _ ​​(avec une boucle for-of, mais vous pouvez utiliser n'importe quelle construction en boucle)}:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Toutes les propriétés, y compris les propriétés non énumérables héritées:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

Answer 8

Depuis que es2015 devient de plus en plus populaire, je publie cette réponse qui inclut l'utilisation du générateur et de l'itérateur pour parcourir en douceur les paires [key, value]. Comme c'est possible dans d'autres langues, par exemple Ruby.

Ok voici un code:

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
  [Symbol.iterator]: function* () {
    for (const i of Object.keys(this)) {
      yield [i, this[i]];
    }
  }
};

for (const [k, v] of MyObject) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Vous trouverez toutes les informations sur la manière de créer un itérateur et un générateur sur la page développeur Mozilla.

J'espère que ça a aidé quelqu'un.

MODIFIER:

ES2017 inclura Object.entries, ce qui facilitera encore plus l'itération des paires [key, value] dans les objets. On sait maintenant que cela fera partie d’une norme selon l’information ts39 stage.

Je pense qu'il est temps de mettre à jour ma réponse pour qu'elle devienne encore plus fraîche qu'aujourd'hui.

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
};

for (const [k, v] of Object.entries(MyObject)) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Vous pouvez en savoir plus sur l'utilisation sur MDN page

Answer 9

via prototype with forEach () qui doit ignorer la chaîne prototype properties:

Object.prototype.each = function(f) {
    var obj = this
    Object.keys(obj).forEach( function(key) { 
        f( key , obj[key] ) 
    });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key + " " + value) });
// a 1
// b 2
// c 3

Answer 10

Après avoir examiné toutes les réponses ici, hasOwnProperty n'est pas requis pour mon propre usage car mon objet json est propre; il n'y a vraiment aucun sens à ajouter un traitement javascript supplémentaire. C'est tout ce que j'utilise:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

Answer 11

for(key in p) {
  alert( p[key] );
}

Remarque: vous pouvez le faire sur des tableaux, mais vous allez également parcourir la propriété length et d'autres propriétés.

Answer 12

Il est intéressant que les personnes dans ces réponses aient abordé à la fois Object.keys() et for...of mais ne les aient jamais combinées:

var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
    console.log(key + ':' + map[key]);

_{Vous ne pouvez pas simplement for...of une Object car ce n'est pas un itérateur, et for...index ou .forEach()ing la Object.keys() est laide/inefficace.
Je suis heureux que la plupart des gens s'abstiennent de for...in (avec ou sans vérifier .hasOwnProperty()) car c'est aussi un peu compliqué, alors à part ma réponse ci-dessus, je suis ici pour dire ...}

---

Vous pouvez faire des associations d'objets ordinaires itérer! Se comporter exactement comme Maps avec utilisation directe du fantaisie for...of
DEMO fonctionne sous Chrome et FF (je suppose uniquement ES6)

var ordinaryObject = {well:'hello', there:'!'};
for (let pair of ordinaryObject)
    //key:value
    console.log(pair[0] + ':' + pair[1]);

//or
for (let [key, value] of ordinaryObject)
    console.log(key + ':' + value);

Tant que vous incluez ma cale ci-dessous:

//makes all objects iterable just like Maps!!! YAY
//iterates over Object.keys() (which already ignores prototype chain for us)
Object.prototype[Symbol.iterator] = function() {
    var keys = Object.keys(this)[Symbol.iterator]();
    var obj = this;
    var output;
    return {next:function() {
        if (!(output = keys.next()).done)
            output.value = [output.value, obj[output.value]];
        return output;
    }};
};

Sans avoir à créer un objet Map réel ne contenant pas le sucre syntaxique de Nice.

var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
    console.log(pair[0] + ':' + pair[1]);

En fait, avec cette cale, si vous vouliez toujours tirer parti des autres fonctionnalités de Map (sans les intégrer toutes), mais que vous souhaitiez tout de même utiliser la notation objet nette, puisque les objets sont maintenant itérables, vous pouvez maintenant en faire une carte!

//shown in demo
var realMap = new Map({well:'hello', there:'!'});

---

Pour ceux qui n'aiment pas jouer au shim ou déranger prototype en général, n'hésitez pas à créer la fonction sur window à la place, appelez-la sous la forme getObjIterator() alors;

//no prototype manipulation
function getObjIterator(obj) {
    //create a dummy object instead of adding functionality to all objects
    var iterator = new Object();

    //give it what the shim does but as its own local property
    iterator[Symbol.iterator] = function() {
        var keys = Object.keys(obj)[Symbol.iterator]();
        var output;

        return {next:function() {
            if (!(output = keys.next()).done)
                output.value = [output.value, obj[output.value]];
            return output;
        }};
    };

    return iterator;
}

Maintenant, vous pouvez simplement l'appeler comme une fonction ordinaire, rien d'autre n'est affecté

var realMap = new Map(getObjIterator({well:'hello', there:'!'}))

ou

for (let pair of getObjIterator(ordinaryObject))

Il n'y a aucune raison pour que cela ne fonctionne pas.

Bienvenue dans le futur.

Answer 13

Object.keys (obj): Array

récupère toutes les clés de toutes les propriétés énumérables propres (non héritées).

Donc, il donne la même liste de clés que vous le souhaitez en testant chaque clé d'objet avec hasOwnProperty. Vous n'avez pas besoin de cette opération de test supplémentaire et Object.keys( obj ).forEach(function( key ){}) est supposé être plus rapide. Prouvons le:

var uniqid = function(){
			var text = "",
					i = 0,
					possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
			for( ; i < 32; i++ ) {
					text += possible.charAt( Math.floor( Math.random() * possible.length ) );
			}
			return text;
		}, 
		CYCLES = 100000,
		obj = {}, 
		p1,
		p2,
		p3,
		key;

// Populate object with random properties
Array.apply( null, Array( CYCLES ) ).forEach(function(){
	obj[ uniqid() ] = new Date()
});

// Approach #1
p1 = performance.now();
Object.keys( obj ).forEach(function( key ){
	var waste = obj[ key ];
});

p2 = performance.now();
console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds.");

// Approach #2
for( key in obj ) {
	if ( obj.hasOwnProperty( key ) ) {
		var waste = obj[ key ];
	}
}

p3 = performance.now();
console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");

Dans mon Firefox j'ai les résultats suivants

• L’approche Object.keys a pris 40,21101451665163 millisecondes.
• pour… dans/hasOwnProperty approche a pris 98,26163508463651 millisecondes.

PS. sur Chrome la différence encore plus grande http://codepen.io/dsheiko/pen/JdrqXa

PS2: dans ES6 (EcmaScript 2015), vous pouvez réitérer plus facilement un objet itératif: 

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
    console.log(pair);
}

// OR 
let map = new Map([
    [false, 'no'],
    [true,  'yes'],
]);
map.forEach((value, key) => {
    console.log(key, value);
});

Answer 14

Voici une autre méthode pour parcourir un objet.

   var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};


Object.keys(p).forEach(key => { console.log(key, p[key]) })

Answer 15

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " = " + p[key]);
    }
}

<p>
  Output:<br>
  p1 = values1<br>
  p2 = values2<br>
  p3 = values3
</p>

Answer 16

La méthode Object.keys() renvoie un tableau des propriétés énumérables propres à un objet donné. En savoir plus à ce sujet ici

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

Answer 17

Vous pouvez ajouter une simple fonction forEach à tous les objets, de sorte que vous puissiez automatiquement parcourir tout objet en boucle:

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        for (var key in this) {
            if (!this.hasOwnProperty(key)) {
                // skip loop if the property is from prototype
                continue;
            }
            var value = this[key];
            func(key, value);
        }
    },
    enumerable: false
});

Pour ceux qui n'aiment pas la méthode " pour ... dans " -:

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        var arr = Object.keys(this);
        for (var i = 0; i < arr.length; i++) {
            var key = arr[i];
            func(key, this[key]);
        }
    },
    enumerable: false
});

Maintenant, vous pouvez appeler simplement:

p.forEach (function(key, value){
    console.log ("Key: " + key);
    console.log ("Value: " + value);
});

Si vous ne voulez pas avoir de conflits avec d’autres forEach-Methods, vous pouvez le nommer avec votre nom unique.

Answer 18

Les boucles peuvent être très intéressantes lorsque vous utilisez du JavaScript pur. Il semble que seule la norme ECMA6 (nouvelle spécification JavaScript 2015) ait les boucles sous contrôle. Malheureusement, au moment où j'écris ces lignes, les navigateurs et l'environnement de développement intégré (IDE) ont toujours du mal à prendre en charge complètement les nouvelles options.

En bref, voici à quoi ressemble une boucle d’objet JavaScript avant ECMA6:

for (var key in object) {
  if (p.hasOwnProperty(key)) {
    var value = object[key];
    console.log(key); // This is the key;
    console.log(value); // This is the value;
  }
}

En outre, je sais que cette question dépasse le cadre de la question, mais en 2011, ECMAScript 5.1 a ajouté la méthode forEach pour les tableaux uniquement, ce qui a fondamentalement créé un nouveau moyen amélioré de parcourir des tableaux tout en laissant des objets non-itérables avec l'ancienne boucle for . Mais ce qui est étrange, c’est que cette nouvelle méthode forEach ne prend pas en charge break, ce qui a engendré toutes sortes d’autres problèmes.

Fondamentalement, en 2011, il n’existait pas de moyen vraiment solide de faire une boucle dans JavaScript, à part ce que de nombreuses bibliothèques populaires (jQuery, Underscore, etc.) ont décidé de réimplémenter.

À partir de 2015, nous disposons désormais d'un meilleur moyen de boucler (et de casser) tout type d'objet (y compris les tableaux et les chaînes). Voici à quoi ressemblera finalement une boucle en JavaScript lorsque la recommandation deviendra la norme:

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

Notez que la plupart des navigateurs ne prendront pas en charge le code ci-dessus à compter du 18 juin 2016. Même dans Chrome, vous devez activer cet indicateur spécial pour qu'il fonctionne: chrome://flags/#enable-javascript-harmony

Jusqu'à ce que cela devienne la nouvelle norme, l'ancienne méthode peut toujours être utilisée mais il existe également des alternatives dans les bibliothèques populaires ou même des alternatives light pour ceux qui n'utilisent aucune de ces bibliothèques.

Answer 19

Seul le code JavaScript sans dépendances:

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
keys = Object.keys(p);   // ["p1", "p2", "p3"]

for(i = 0; i < keys.length; i++){
  console.log(keys[i] + "=" + p[keys[i]]);   // p1=value1, p2=value2, p3=value3
}

Answer 20

Je le ferais plutôt que de vérifier obj.hasOwnerProperty dans chaque boucle for ... in.

var obj = {a : 1};
for(var key in obj){
    //obj.hasOwnProperty(key) is not needed.
    console.log(key);
}
//then check if anybody has messed the native object. Put this code at the end of the page.
for(var key in Object){
    throw new Error("Please don't extend the native object");
}

Answer 21

Vous pouvez également utiliser Object.keys () et parcourir les clés d'objet comme ci-dessous pour obtenir la valeur:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});

Answer 22

Si quelqu'un a besoin de parcourir en boucle arrayObjects avec condition :

var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}];

for (var i=0; i< arrayObjects.length; i++) {
  console.log(arrayObjects[i]);
  
  for(key in arrayObjects[i]) {      
    
      if (key == "status" && arrayObjects[i][key] == "good") {
        
          console.log(key + "->" + arrayObjects[i][key]);
      }else{
          console.log("nothing found");
      }
   }
}

Answer 23

    var p =[{"username":"ordermanageadmin","user_id":"2","resource_id":"Magento_Sales::actions"},
{"username":"ordermanageadmin_1","user_id":"3","resource_id":"Magento_Sales::actions"}]
for(var value in p) {
    for (var key in value) {
        if (p.hasOwnProperty(key)) {
            console.log(key + " -> " + p[key]);
        }
    }
}

Answer 24

Dans le dernier script ES, vous pouvez faire quelque chose comme ceci:

Object.entries(p);

Answer 25

Si vous souhaitez également parcourir propriétés non énumérables également, vous pouvez utiliser Object.getOwnPropertyNames(obj) pour renvoyer un tableau de toutes les propriétés (énumérables ou non) trouvées directement sur un objet donné.

var obj = Object.create({}, {
  // non-enumerable property
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});

obj.foo = 1; // enumerable property

Object.getOwnPropertyNames(obj).forEach(function (name) {
  document.write(name + ': ' + obj[name] + '<br/>');
});

Answer 26

depuis ES06, vous pouvez obtenir les valeurs d’un objet sous forme de tableau avec

let arrValues = Object.values( yourObject) ;

il retourne le tableau des valeurs d'objet et n'extrait pas de valeurs de Prototype !!

MDN DOCS Object.values ​​()

et pour les clés (déjà répondu devant moi ici) 

let arrKeys   = Object.keys(yourObject);

Answer 27

Dans ES6, nous avons des symboles connus pour exposer certaines méthodes précédemment internes. Vous pouvez les utiliser pour définir le fonctionnement des itérateurs pour cet objet:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

cela donnera le même résultat que si vous utilisiez for ... in es6 loop.

for(var key in p) {
    console.log(key);
}

Mais il est important de connaître les fonctionnalités dont vous disposez maintenant avec es6!

Answer 28

Un objet devient un itérateur lorsqu'il implémente la méthode .next ()

const james = {
name: 'James',
height: `5'10"`,
weight: 185,

[Symbol.iterator]() {
let properties = []
for (let key of Object.keys(james)){
     properties.Push(key);
 }

index = 0;
return {
        next: () => {
            let key = properties[index];
            let value = this[key];
            let done = index >= properties.length - 1 ;
            index++;
            return { key, value, done };
        }
    };
  }

};


const iterator = james[Symbol.iterator]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`
console.log(iterator.next().value); // 185

Answer 29

Object.entries() fonction:

var p = {
	    "p1": "value1",
	    "p2": "value2",
	    "p3": "value3"
	};

for (var i in Object.entries(p)){
	var key = Object.entries(p)[i][0];
	var value = Object.entries(p)[i][1];
	console.log('key['+i+']='+key+' '+'value['+i+']='+value);
}

Answer 30

Si vous souhaitez effectuer une itération uniquement sur les propriétés, utilisez l'une des réponses ci-dessus. Toutefois, si vous souhaitez effectuer une itération sur toutes les fonctions, vous pouvez utiliser Object.getOwnPropertyNames (obj)

for (let o of Object.getOwnPropertyNames(Math)) {
  console.log(o);
}

J'utilise parfois cela pour tester rapidement toutes les fonctions sur des objets avec des entrées et des sorties simples.

Answer 31

J'ai eu un problème similaire en utilisant Angular, voici la solution que j'ai trouvée.

Étape 1. Récupère toutes les clés d'objet. en utilisant Object.keys. Cette méthode retourne un tableau des propriétés énumérables propres à un objet donné.

Étape 2. Créez un tableau vide. Toutes les propriétés vont vivre, car votre nouvelle boucle ngFor va pointer sur ce tableau, nous devons toutes les attraper .Étape 3. Iterate lance toutes les clés et pousse chacune dans le tableau que vous avez créé ... Voici comment cela ressemble dans le code.

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.Push(evilResponseProps[prop]);
}

Voici un lien vers le post original. https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

Answer 32

Si votre application est en création de chaîne, une combinaison intéressante est Object.keys, implode et la méthode tableau .map. Par exemple, si nous avons un objet JSON comme

var data = {
    key1: 10,
    key2: 'someString',
    key3: 3000
}

.. et nous aimerions générer "Les valeurs sont key1 = 10, key2 = someString, key3 = 3000."

Nous pouvons accomplir cela en une seule ligne de code:

var str = `The values are ${implode(', ', Object.keys(data).map(function(key){return `${key} = ${data[key]}`}))}.`;

Implode réduit un tableau en une chaîne avec un délimiteur (premier argument) inséré entre les éléments; .map itère dans un tableau et renvoie un tableau, et Object.keys a été très bien élaboré par les autres réponses.

Answer 33

Voici comment parcourir en boucle un objet javascript et placer les données dans un tableau .

<body>
<script>
function createTable(objectArray, fields, fieldTitles) {
  let body = document.getElementsByTagName('body')[0];
  let tbl = document.createElement('table');
  let thead = document.createElement('thead');
  let thr = document.createElement('tr');

  for (p in objectArray[0]){
    let th = document.createElement('th');
    th.appendChild(document.createTextNode(p));
    thr.appendChild(th);
    
  }
 
  thead.appendChild(thr);
  tbl.appendChild(thead);

  let tbdy = document.createElement('tbody');
  let tr = document.createElement('tr');
  objectArray.forEach((object) => {
    let n = 0;
    let tr = document.createElement('tr');
    for (p in objectArray[0]){
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(object[p]));
      tr.appendChild(td);
      n++;
    };
    tbdy.appendChild(tr);    
  });
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
  return tbl;
}

createTable([
              {name: 'Banana', price: '3.04'}, // k[0]
              {name: 'Orange', price: '2.56'},  // k[1]
              {name: 'Apple', price: '1.45'}
           ])
</script>