How to iterate a JavaScript object's properties using jQuery?

In this article, we are going to learn how to iterate a JavaScript object?s properties using jQuery.

The simplest way to iterate over an object with JavaScript is to use a for in loop.

The for statement will iterate over the objects as an array, but the loop will send the key to the object instead of an index as a parameter.

This loop is used to iterate over all non-Symbol iterative properties of an object. The hasOwnProperty() method can be used to check if the property belongs to the object itself. The value of each key of the object can be found by using the key as the index of the object.

Syntax

Following is the syntax for iterating a JavaScript object?s using jQuery.

for (let key in example) {
   if (example.hasOwnProperty(key)) {
      value = example[key];
      console.log(key, value);
   }
}

Example

Following is the example program for iterating JavaScript object?s using jQuery.

<div class="execute"></div><div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator"><</span>html<span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
   <span class="token operator"><</span>title<span class="token operator">></span>
   <span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span>
   <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator"><</span>body<span class="token operator">></span>
   <span class="token operator"><</span>button onclick<span class="token operator">=</span><span class="token string">"iterateObject()"</span><span class="token operator">></span>
      Iterate
   <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
   <span class="token operator"><</span>script<span class="token operator">></span>
      <span class="token keyword">function</span> <span class="token function">iterateObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">let</span> example <span class="token operator">=</span> <span class="token punctuation">{</span>
            Book<span class="token operator">:</span> <span class="token string">"Rich Dad Poor Dad"</span><span class="token punctuation">,</span>
            Author<span class="token operator">:</span> <span class="token string">"Robert Kiyosaki"</span><span class="token punctuation">,</span>
         <span class="token punctuation">}</span><span class="token punctuation">;</span>
         <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> example<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>example<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">{</span>
               value <span class="token operator">=</span> example<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
               document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> <span class="token string">"<br>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
   <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page

Example

Following is another example program for iterating JavaScript object?s using jQuery.

<div class="execute"></div><div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator"><</span>html<span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
   <span class="token operator"><</span>title<span class="token operator">></span>
   <span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span>
   <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator"><</span>body<span class="token operator">></span>
   <span class="token operator"><</span>button onclick<span class="token operator">=</span><span class="token string">"iterateObject()"</span><span class="token operator">></span>
      Iterate
   <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
   <span class="token operator"><</span>script<span class="token operator">></span>
      <span class="token keyword">function</span> <span class="token function">iterateObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">let</span> example <span class="token operator">=</span> <span class="token punctuation">{</span>
            Student<span class="token operator">:</span> <span class="token string">"Amar"</span><span class="token punctuation">,</span>
            Branch<span class="token operator">:</span> <span class="token string">"Information Technology"</span><span class="token punctuation">,</span>
            Section<span class="token operator">:</span><span class="token string">"A"</span><span class="token punctuation">,</span>
            Rollno<span class="token operator">:</span><span class="token number">22</span>
         <span class="token punctuation">}</span><span class="token punctuation">;</span>
         <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> example<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>example<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">{</span>
               value <span class="token operator">=</span> example<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
               document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> <span class="token string">"<br>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
   <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page.

Using Object.entries()

We can also use Object.entries() method is used to return an array of the object?s own enumerable string-keyed property pairs. The array is used with the map() method to extract the key and value from the pairs of the context.

The key and values from the key-value pair can be extracted by accessing the first and second index of the array pair. The first index corresponds to the key and the second index corresponds to the value of the pair.

Syntax

Following is the syntax for iterating a JavaScript object?s using jQuery.

Object.entries(example).map(entry => {
   let key = entry[0];
   let value = entry[1];
   console.log(key, value);
});

Example

Following is the example program for iterating JavaScript object?s using jQuery.

<div class="execute"></div><div class="code-mirror  language-javascript" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span>
<span class="token operator"><</span>html<span class="token operator">></span>
<span class="token operator"><</span>head<span class="token operator">></span>
   <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">></span>
   <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span>
<span class="token operator"><</span>body<span class="token operator">></span>
   <span class="token operator"><</span>button onclick<span class="token operator">=</span><span class="token string">"iterateObject()"</span><span class="token operator">></span>
      Iterate
   <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
   <span class="token operator"><</span>script <span class="token operator">></span>
      <span class="token keyword">function</span> <span class="token function">iterateObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">let</span> example <span class="token operator">=</span> <span class="token punctuation">{</span>
            Student<span class="token operator">:</span> <span class="token string">"Amar"</span><span class="token punctuation">,</span>
            Branch<span class="token operator">:</span> <span class="token string">"Information Technology"</span><span class="token punctuation">,</span>
            Section<span class="token operator">:</span><span class="token string">"A"</span><span class="token punctuation">,</span>
            Rollno<span class="token operator">:</span><span class="token number">22</span>
         <span class="token punctuation">}</span><span class="token punctuation">;</span>
         Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>example<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">entry</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> key <span class="token operator">=</span> entry<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> value <span class="token operator">=</span> entry<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">": "</span><span class="token punctuation">,</span> value<span class="token punctuation">,</span> <span class="token string">"<br>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>  
   <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div>

On executing the above program, it will generate a web page containing a button named iterate. After clicking the iterate button, following content will be displayed on the page.