How To React
Published in

How To React

Different ways to loop through arrays and objects in React

If we are working on any React project we have to play with arrays and objects for data. Arrays are used to store multiple data into a single variable and objects are a collection of properties which is an association between a key and value. So both play an important role in the creation of an application. There are multiple ways to iterate through an array and object which we will see in this tutorial.

Array

To explain different ways to iterate array we will first set up a simple React app that will fetch data using Axios from our API. Lets set up that.

  • Create React project yarn create react-app yourprojectname
  • Now install Axios yarn add axios
  • Paste the below code inside your project app.js file.
An array of data from API

This is just a basic React set up to fetch data from API using Axios. For more detail, you can visit this tutorial. So we are logging out the response data we are getting from the API inside the getData function. Now I’ll show you how to iterate that array of data to our React project using the various approaches.

The map() method creates a new array with the result of calling a function for every array element.

array.map(function(currentValue, index, arr), thisValue)

So after receiving the data from the API I have changed my data state from blank array to the response data using the React setState method. Now using the map function I am iterating the data inside the render method.

I have used the arrow function for a shorter version of my code you can also use the normal javascript function. Both will give the same result.

The for loop is executed as long as a condition is true. It will continue to run as long as the condition is true. It will only stop when the condition becomes false.

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

After getting the data we are running a for loop to iterate data and passing the value to our blank variable (loopData). Now using the setState method we are changing our userName state from blank data to our new loopData. This will give us data in this.state.userName. After that using the Javascript destructuring method I am passing that to a single variable userName and then using React dangerouslySetInnerHTML={{__html: userName}} I am parsing our data which contains HTML elements.

The forEach method executes a provided function once for each array element.

array.forEach(function(currentValue, index, arr), thisValue)

This is like a combination of map function and for loop. Same after getting the data running a forEach loop to iterate our data and pushing data to the blank variable (forEachData) then changing the state of userName using the setState method, destructuring the userName, and then finally sending it to dangerouslySetInnerHTML for parsing the userName.

The old fashioned way

while loop is executed while a specified condition is true. It will only stop when the condition becomes false.

while (condition) {
// code block to be executed
}

This is similar to for loop just the syntax is different. So check the for loop above for detail.

The do/while loop executes a block of code once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

do {
code block to be executed
}
while (condition);

Iterates over elements of collection and invokes iteratee for each element. The iteratee is invoked with three arguments: (value, index|key, collection). Iteratee functions may exit iteration early by explicitly returning false.

_.forEach(array, function(value) {
console.log(value);
});

Note: The _.each method of lodash will also give the same result. The syntax is also the same as _.forEach method.

Creates an array of values by running each element in collection thru iteratee. The iteratee is invoked with three arguments: (value, index|key, collection).

_.map(array, function(value) {
console.log(value);
});

Object

Sometimes we have to loop through an object to get data. If we use map(), forEach() or for() it will give us TypeError: items is not iterable or function. So how do we loop through objects? let us see through the below examples.

After setting up the initial React project and calling data from the API using axios our object data will look something like this.

http://jsonplaceholder.typicode.com/users/1

Now lets loop through this object using different methods available.

The for/in loops through the properties of an object. The block of code inside the loop will be executed once for each property.

for (var in object) {
code block to be executed
}

After getting data from the API I am using for/in loop to iterate our object. Inside for/in loop, the x contains the key of our object key-value pair, so I am checking that with javascript if statement that if x whose key is equal to the name should get the value of that key which in our case is Leanne Graham and after the check statement I am concating that value to loopData. Now after all this passing that loopData to our setState method to change the value of the data state. This will render us My name is Leanne Graham.

The for…of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

for (variable of iterable) {
// code block to be executed
}

There are three ways we can use for/of loop to achieve our goal that’s to get only the name value from the object.

Object.keys method returns an array of a given object’s own enumerable property names. Check below for an example.

const object = {
a: 'Manish',
b: 27,
c: false
};
console.log(Object.keys(object));
// expected output: Array ["a", "b", "c"]

So Object.keys will give us the key of an object in an array. So now we have key and object, and running that inside for/of loop and passing our check statement we will get our desire result.

The Object.entries() method returns an array of a given object’s own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for…in loop.

const object = {
a: 'Manish',
b: 27
};
for (const [key, value] of Object.entries(object)) {
console.log(`${key}: ${value}`);
}
// expected output:
// "a: Manish"
// "b: 27"
// order is not guaranteed

The above example is the combination of for…of, destructuring, if-else and Object.entries for getting our desire result.

Iterates over own and inherited enumerable string keyed properties of an object and invokes iteratee for each property. The iteratee is invoked with three arguments: (value, key, object). Iteratee functions may exit iteration early by explicitly returning false.

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

Iterates over own enumerable string keyed properties of an object and invokes iteratee for each property. The iteratee is invoked with three arguments: (value, key, object). Iteratee functions may exit iteration early by explicitly returning false.

_.forOwn(Object, function(value, key) {
console.log(value);
});

Note: The syntaxes are same for lodash forIn and forOwn method but forIn iterates over own and inherited enumerable properties of an object while forOwn iterates over own enumerable string keyed properties. Both will work fine.

Iterates over elements of collection and invokes iteratee for each element. The iteratee is invoked with three arguments: (value, index|key, collection). Iteratee functions may exit iteration early by explicitly returning false.

_.forEach(Object, function(value, key) {
console.log(value);
});

Note Lodash ._forEach and its alias ._each is useful to loop through both objects and arrays

Creates an array of values by running each element in collection thru iteratee. The iteratee is invoked with three arguments:(value, index|key, collection).

_.map(Object, function(value, key) {
console.log(value);
});

So in the above examples, I have shown you all the possible ways available to loop through arrays and objects. If I have missed something please share in the comment section Until then check the live example and GitHub repository for practice.

--

--

Learn how to create fast, interactive web apps using react.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
React Developer

Fullstack developer with expertise in WordPress and React. Writing code for humans. Add me on Linkedin https://www.linkedin.com/in/manishmandal21/