How to Filter an Array of JSON Objects by Attribute in JavaScript

Learn how to filter JSON arrays in JavaScript by one or multiple attributes using Array.filter(). Includes examples for strings, numbers, booleans, and nested objects.

🧹 How to Filter an Array of JSON Objects by Attribute in JavaScript

In JavaScript, JSON objects are everywhere — APIs, localStorage, configurations, you name it. A common task is filtering a list of JSON objects by specific attributes, such as status, id, type, or nested values.

In this blog, you’ll learn:

• The basics of Array.prototype.filter()
• How to filter by a single or multiple attributes
• Use cases with numbers, strings, booleans, and nested properties
• Common mistakes and how to avoid them

---

📦 Example JSON Array

Let’s say we have a list of users:

const users = [
  { id: 1, name: "Alice", role: "admin", active: true },
  { id: 2, name: "Bob", role: "editor", active: false },
  { id: 3, name: "Carol", role: "admin", active: true },
  { id: 4, name: "Dan", role: "viewer", active: true }
];

🧠 Filter by a Single Attribute

Filter by role: “admin”

const admins = users.filter(user => user.role === "admin");

console.log(admins);
// [
//   { id: 1, name: "Alice", role: "admin", active: true },
//   { id: 3, name: "Carol", role: "admin", active: true }
// ]

🔁 Filter by Multiple Attributes

Example: Active admins only

const activeAdmins = users.filter(
  user => user.role === "admin" && user.active
);

Another example: Exclude inactive users

const activeUsers = users.filter(user => user.active !== false);

🔎 Case-Insensitive Filtering

Filter by name (case-insensitive):

const searchName = "alice";
const result = users.filter(user =>
  user.name.toLowerCase() === searchName.toLowerCase()
);

📁 Filter by Nested Attributes

If your objects have nested properties:

const orders = [
  { id: 101, customer: { name: "Alice", country: "US" } },
  { id: 102, customer: { name: "Bob", country: "CA" } },
  { id: 103, customer: { name: "Carol", country: "US" } }
];

const usOrders = orders.filter(order => order.customer.country === "US");

🧩 Dynamic Attribute Filtering

Filter by key/value pair dynamically:

function filterByAttribute(array, key, value) {
  return array.filter(item => item[key] === value);
}

const editors = filterByAttribute(users, "role", "editor");

📌 Useful for reusable utilities or filters in UI frameworks

---

⚠️ Common Pitfalls

Mistake	Solution
Using = instead of ===	Always use === for strict comparison
Filtering undefined attributes	Use optional chaining item?.key if unsure
Case sensitivity	Normalize case with .toLowerCase()

---

🛠 Real-World Use Cases

• Search & filter in React/Vue apps
• Validating and processing API responses
• Creating filtered lists in dashboards or reports
• Data transformation before sending to backend

---

🧪 Conclusion

Filtering JSON arrays in JavaScript is simple and powerful with the .filter() method. Mastering it enables you to write clean, functional code for everything from user filtering to dynamic data pipelines.

Key tips:

• Use Array.filter() for declarative logic
• Combine multiple conditions with &&
• Handle nested and dynamic keys with care

---

🔗 Further Reading

• MDN: Array.prototype.filter()
• Lodash _.filter for more advanced filtering
• JavaScript Destructuring to clean up filter syntax

---