How to display all items or values in an array using loop in jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery.each() Function

The jQuery.each() or $.each() can be used to seamlessly iterate over any collection, whether it is an object or an array. However, since the $.each() function internally retrieves and uses the length property of the passed array or object. So, if you it has a property called length — e.g. {en: 'english', length: 5} — the function might not work properly.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Print Array Values with Loop</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  •     $(document).ready(function(){
  •         var fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
  •         $.each(fruitsArray, function(index, value){
  •             $("#result").append(index + ": " + value + '<br>');
  •         });
  •     });
  • </script>  
  • </head> 
  • <body>
  •     <div id="result"></div>
  • </body>
  • </html>

Similarly, you can print contents of an object through a loop, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Display Object Contents with Loop</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  •     $(document).ready(function(){
  •         var supercarObject = {"brand": "Lamborghini", "model" : "Huracan", "origin": "Italy"};
  •         $.each(supercarObject, function(key, value){
  •             $("#result").append(key + ": " + value + '<br>');
  •         });
  •     });
  • </script>  
  • </head> 
  • <body>
  •     <div id="result"></div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.