← Back to jQuery Course | Chapter 11: Utility Methods | Lesson 3 of 6

Array Helper Utilities

jQuery each can loop through every item in an array. It is simple and beginner-friendly.

In this page:

  1. Loop Through an Array
  2. Find an Item
  3. Merge Arrays
  4. Filter Array Values
  5. Small Array Project
Syntax
javascript 
$.each(array, function (index, value) { /* ... */ });
$.grep(array, function (value) { return condition; });
$.inArray(value, array);
$.merge(array1, array2);

Loop Through an Array

$.each() iterates over every element of an array (or every property of an object), running a callback once per item and passing in the index and value each time. It's a general-purpose looping utility that works the same way regardless of whether you're iterating an array or a plain object.

Example: Loop Through an Array

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      const fruits = ["Apple", "Banana"];
      $.each(fruits, function(index, value) {
        $("#output").append($("<div>").text(String(index) + " " + value));
      });
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Find an Item

The inArray utility searches an array for a specific value and returns its numeric index if found, or -1 if it isn't present — similar to the native Array.indexOf(). It's handy for a quick membership check without writing a manual loop.

Example: Find an Item

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const fruits = ["Apple", "Banana", "Cherry"];
      $("#output").text(String($.inArray("Banana", fruits)));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Merge Arrays

The merge utility combines two arrays by appending the contents of the second array onto the end of the first, modifying the first array in place. It's a simple way to concatenate lists of data pulled from different sources into one combined array.

Example: Merge Arrays

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const a = [1, 2];
      const b = [3, 4];
      $.merge(a, b);
      $("#output").text(String(a));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Filter Array Values

The grep utility builds a new array containing only the values from an existing array that pass a test function you provide, similar to the native Array.filter(). It's useful for narrowing down a large list — like showing only completed tasks from a full task list — without a manual loop.

Example: Filter Array Values

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const nums = [1, 2, 3, 4, 5];
      const evens = $.grep(nums, function(n) { return n % 2 === 0; });
      $("#output").text(String(evens));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Small Array Project

These array utilities are useful any time you're working with a list of related items — students, products, courses — and need to search, combine, or filter them before displaying or processing the results.

Example: Small Array Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const students = ["Alice", "Bob", "Charlie"];
      const filtered = $.grep(students, function(name) { return name.startsWith("A"); });
      $("#output").text(String(filtered));
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Type Checking Utilities · String Cleaning with trim() · Merging Objects with extend() · Binding Context with proxy()

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Returning false from a $.each() callback expecting it to skip an item, when it stops the whole loop; use return true to skip.
  2. Treating $.inArray("kiwi", fruits) as true or false, when it returns an index, so if ($.inArray(...)) fails for index 0 and passes for -1.
  3. Using $.merge(a, b) and expecting a to stay unchanged, when it modifies and returns the first array.
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson String Cleaning with trim() Next Lesson → Merging Objects with extend()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.