In JavaScript frontend frameworks, working with APIs is a common thing. Often, we manipulate JSON objects and arrays. Hence, it becomes essential to know how to loop through an object or an array so that we can show the data accordingly.

In this blog, we will discuss looping in

• Arrays
• Objects
• Two-dimensional Array

---

1. Looping through an Array

Consider an array like this.

let arr = ['virat kohli', 'sachin tendulkar', 'rohit sharma', 'dhoni'];

We want to put this data in a tabular form in a table, named players. I am using ES6 to achieve this. The code looks something like this.

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<div id="result"></div>

<script>
    let result = document.getElementById('result');
    let arr = ['virat kohli', 'sachin tendulkar', 'rohit sharma', 'dhoni'];

    // Arrange in a tabular form
    let output = `
        <table>
            <tr>
                <th>Players</th>
            </tr>
            ${arr.map(item => (
                `<tr>
                    <td>${item}</td>
                </tr>`
            )).join('')}
        </table>
    `;
    result.innerHTML = output;
</script>

The output will look something like this.

---

Looping through an object

Consider an object like this.

let obj = {        
    'cricket': 'kohli',        
    'tennis': 'federer',        
    'football': 'messi'    
}

Now we want to put it in a tabular form, where the key of the object will be under Sports column and the value of the object will be in Players column. We can achieve this like this.

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<div id="result"></div>

<script>
    let result = document.getElementById('result');
    let obj = {
        'cricket': 'kohli',
        'tennis': 'federer',
        'football': 'messi'
    }

    // Arrange in a tabular form
    let output = `
        <table>
            <tr>
                <th>Sport</th>
                <th>Players</th>
            </tr>
            ${Object.keys(obj).map(key => (
                `<tr>
                    <td>${key}</td>
                    <td>${obj[key]}</td>
                </tr>`
            )).join('')}
        </table>
    `;
    result.innerHTML = output;
</script>

Here, Object.keys() is used to fetch the keys of the obj, and then it stores them as an array. The map() method loops through the array of keys and finds the values of the obj by obj[key].

The output will look something like this.

Looping through a two-dimensional array

Let’s consider the following array

let arr2 = [        
    ['cricket', 'kohli'],        
    ['football', 'messi'],        
    ['tennis', 'federer']    
];

We want to achieve the same table which we did in the previous one. We can do something like this.

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<div id="result"></div>

<script>
    let result = document.getElementById('result');

    let arr2 = [
        ['cricket', 'kohli'],
        ['football', 'messi'],
        ['tennis', 'federer']
    ];

    // To output values
    let output = `
        <table>
            <tr>
                <th>Sport</th>
                <th>Players</th>
            </tr>
            ${arr2.map(item => (
                `<tr>
                    <td>${item[0]}</td>
                    <td>${item[1]}</td>
                </tr>`
            )).join('')}
        </table>
    `
    result.innerHTML = output;
</script>

The output table will look the same as in the previous one.

So, in this way, we can loop and arrange the data from an object or an array.

Thanks for reading.