How can I loop through a JavaScript object array?

Question

I am trying to loop through the following:

const data = {
 "messages": [
 {
 "msgFrom": "13223821242",
 "msgBody": "Hi there"
 }, 
 {
 "msgFrom": "Bill",
 "msgBody": "Hello!"
 }
 ]
}

I want to retrieve msgFrom and msgBody

I've tried:

for (const key in data) {
 const obj = data[key];
 for (const prop in obj) {
 if(obj.hasOwnProperty(prop)){
 console.log(prop + " = " + obj[prop]);
 }
 }
}

But the console log prints [Object]

Any ideas what im doing wrong?

• zerkms: console.log(obj, prop);
• Jonathan Lonowski: You'll generally want to try to avoid using for..in for Arrays.
• RobG: The only credible reason not to use for..in with an Array is that the properties may not be returned in the expected order. Otherwise, it's no better or worse than using for..in on any other Object (unexpected properties, properties from the [[Prototype]], etc.).

Answer 1

It appears you may just have missed the "messages" property in the data, so the loop is likely iterating the root Object rather than the Array:

for (var key in data.messages) {
 var obj = data.messages[key];
 // ...
}

Unless data was set to messages before the given snippet.

Though, you should consider changing that to a normal for loop for the Array:

for (var i = 0, l = data.messages.length; i < l; i++) {
 var obj = data.messages[i];
 // ...
}

• Alosyius: Thanks a ton for helping me change to a regular for loop as well! Accepting as soon as possible.
• Travis Heeter: Why should he consider using a normal for loop?
• Jonathan Lonowski: @TravisHeeter for..in treats the array as a plain object, iterating all enumerable keys in an order that isn't guaranteed, rather than just its indices, 0 to length - 1. At times, that may actually be desired. Typically not. – Why is using "for...in" with array iteration a bad idea?
• Travis Heeter: @JonathanLonowski Thanks, maybe you can add that to your answer?

Answer 2

You can use forEach method to iterate over array of objects.

data.messages.forEach(function(message){
 console.log(message)
});

Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

• Shift 'n Tab: this one is much simple and efficient
• CodeConnoisseur: @sandeep rajbhandari can you take this a step further and tell me how to return just one message at a time instead of all at once?
• andreszs: Which requires ECMA Script 2015 and won't work in older browser and mobile devices.

Answer 3

All the answers provided here uses normal function but these days most of our code uses arrow functions in ES6. I hope my answer will help readers on how to use arrow function when we do iteration over array of objects

let data = {
 "messages": [{
 "msgFrom": "13223821242",
 "msgBody": "Hi there"
 }, {
 "msgFrom": "Bill",
 "msgBody": "Hello!"
 }]
 }

Do .forEach on array using arrow function

 data.messages.forEach((obj, i) => {
 console.log("msgFrom", obj.msgFrom);
 console.log("msgBody", obj.msgBody);
 });

Do .map on array using arrow function

 data.messages.map((obj, i) => {
 console.log("msgFrom", obj.msgFrom);
 console.log("msgBody", obj.msgBody);
 });

• andreszs: Requires ECMA Script 2015 and doesn't work in older browsers.

Answer 4

In your script, data is your whole object.

key is "messages", which is an array you need to iterate through like this:

 for (var key in data) {
 var arr = data[key];
 for( var i = 0; i < arr.length; i++ ) {
 var obj = arr[ i ];
 for (var prop in obj) {
 if(obj.hasOwnProperty(prop)){
 console.log(prop + " = " + obj[prop]);
 }
 }
 }
 }

Answer 5

Iterations

Method 1: forEach method

messages.forEach(function(message) {
 console.log(message);
}

---

Method 2: for..of method

for(let message of messages){
 console.log(message);
}

Note: This method might not work with objects, such as:

let obj = { a: 'foo', b: { c: 'bar', d: 'daz' }, e: 'qux' }

---

Method 2: for..in method

for(let key in messages){
 console.log(messages[key]);
 }

Answer 6

To loop through an object array or just array in javascript, you can do the following:

var cars = [{name: 'Audi'}, {name: 'BMW'}, {name: 'Ferrari'}, {name: 'Mercedes'}, {name: 'Maserati'}];
for(var i = 0; i < cars.length; i++) {
 console.log(cars[i].name);
}

There is also the forEach() function, which is more "javascript-ish" and also less code but more complicated for its syntax:

cars.forEach(function (car) {
 console.log(car.name);
});

And both of them are outputting the following:

// Audi
// BMW
// Ferrari
// Mercedes
// Maserati

• user752746: Thank you Tarvo, your suggestion worked perfectly for my needs.

Answer 7

The suggested for loop is quite fine but you have to check the properties with hasOwnProperty. I'd rather suggest using Object.keys() that only returns 'own properties' of the object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)

var data = {
 "messages": [{
 "msgFrom": "13223821242",
 "msgBody": "Hi there"
 }, {
 "msgFrom": "Bill",
 "msgBody": "Hello!"
 }]
};
data.messages.forEach(function(message, index) {
 console.log('message index '+ index);
 Object.keys(message).forEach(function(prop) { 
 console.log(prop + " = " + message[prop]);
 });
});

Answer 8

Here is a generic way to loop through the field objects in an object (person):

for (var property in person) {
 console.log(property,":",person[property]);
}

The person obj looks like this:

var person={
 first_name:"johnny",
 last_name: "johnson",
 phone:"703-3424-1111"
};

Answer 9

let data = {
 "messages": [{
 "msgFrom": "13223821242",
 "msgBody": "Hi there"
 }, 
{
 "msgFrom": "Bill",
 "msgBody": "Hello!"
 }]
 }
 data.messages.forEach((obj, i) => {
 console.log("msgFrom", obj.msgFrom + " msgBody", obj.msgBody);
 });

• Community: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Answer 10

To reference the contents of the single array containing one or more objects i.e. everything in the brackets of something like this {messages: [{"a":1,"b":2}] } ,just add [0] to the query to get the first array element

e.g. messages[0] will reference the object {"a":1,"b":2} as opposed to just messages which would reference the entire array [{"a":1,"b":2}]

from there you can work with the result as typical object and use Object.keys for example to get "a" and "b".

Answer 11

let data = {
 "messages": [{
 "msgFrom": "13223821242",
 "msgBody": "Hi there"
 }, {
 "msgFrom": "Bill",
 "msgBody": "Hello!"
 }]
}
for ( i = 0; i < data.messages.length; i++ ) {
 console.log( `Message from ${data.messages[i].msgFrom}: ${data.messages[i].msgBody}` )
}

Answer 12

for (let key in data) {
 let value = data[key];
 for (i = 0; i < value.length; i++) {
 console.log(value[i].msgFrom);
 console.log(value[i].msgBody);
 }
 }

• Lin Du: While your code may provide the answer to the question, please add context/explanation to it so others will have some idea what it does and why it is there.

Answer 13

 arr = [{food:"Mandazi", Price: 5},{food:"Black Tea", Price: 20},{food:"Black Coffee", Price: 20}
 ];
 txt = "";
 for (i = 0; i ";
 }
 document.getElementById("show").innerHTML = txt;

• Syscall: Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made.