How to filter JSON Data in jQuery

This example shows how to filter JSON Data using jQuery. we will use the jquery grep() function to filter JSON Data. jQuery grep() will return a new array from the input array based on the condition. In this example we will filter the JSON items list based on the Brand input textbox fild value.

Syntax:

var res = $.grep(inputlist, function (n, i) { return condition; });

Example:

var res = $.grep(inputjson.Items, function (n, i) { return n.Brand.toLowerCase().indexOf($("#txtbrandinput").val().toLowerCase()) > -1; });
Brand:  

Example Source Code:

<!DOCTYPE html> <html> <head> <title>Json filter example</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> var inputjson = { "Items": [ { "Brand": "Brand One", "Item": "Item One" }, { "Brand": "Brand One", "Item": "Item Two" }, { "Brand": "Brand One", "Item": "Item Three" }, { "Brand": "Brand One", "Item": "Item Four" }, { "Brand": "Brand One", "Item": "Item FIve" }, { "Brand": "Brand Two", "Item": "Item Six" }, { "Brand": "Brand Two", "Item": "Item Seven" }, { "Brand": "Brand Two", "Item": "Item Eight" }, { "Brand": "Brand Two", "Item": "Item Nine" }, { "Brand": "Brand Two", "Item": "Item Ten" } ] }; $(document).ready(function () { filterjson(); }); function filterjson() { var res = $.grep(inputjson.Items, function (n, i) { return n.Brand.toLowerCase().indexOf($("#txtbrandinput").val().toLowerCase()) > -1; }); var outputstr = "<table style='border:solid 1px #000; border-collapse:collapse;' border='1' cellpadding='5'><thead><th>Brand</th><th>Item</th></thead>"; $.each(res, function (i, n) { outputstr += "<tr><td>" + n.Brand + "</td><td>" + n.Item + "</td></tr>"; }); outputstr += "</table>"; $("#res").html(outputstr); } </script> </head> <body> <div> Brand:  <input type="text" id="txtbrandinput" onkeyup="filterjson();" value="one" /> <br /><br /> <div id="res"> </div> </div> </body> </html>