Creating Json File And Searching Data From Json File Using JavaScript

This is in addition to my article CRUD in single View. You can find the details of the class library, which I had used here.

For creating a JSON file, create a simple MVC project.

@model IEnumerable<JsonEntity.Users>
//JsonEntity is my Class library whose reference is added to my project
//Users is my Model which i had added to my class library
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<p>
<input type="button" id="btnCreateJson" value="Create Json" class="btn btn-default"/>
</p>

Now, add JavaScript.

$("#btnCreateJson").click(function () {
$.post("/Users/CreateJson", function (response) { //Users is my controller's Name and CreateJson is my Jsonresult Method
if (response != null) {
alert("Json Created");
location.reload();
}
else {
alert("Error");
}
});
})

Add JsonResult Method to your controller, as given below:

[HttpPost]
public ActionResult CreateJson()
{
try
{
using (JsonContext context = new JsonContext()) //JsonContext is my context name which i had used in class library
{
var UsersList = context.ObjUser.ToList(); // Getting the list of users for DB.
var jsondata = new JavaScriptSerializer().Serialize(UsersList);
string path = Server.MapPath("~/Json/"); //Path where your json file will be saved
System.IO.File.WriteAllText(path + "User.json", jsondata); // User.json is your json file's name
return Json(UsersList, JsonRequestBehaviour.AllowGet);
}
}
catch(Exception ez)
{
return null;
}
}

Now, your JSON file has been created. For retrieving whole data from JSON file, write the code, given below:.

$('#get-data').click(function () { //get-data will be the id of your button
var url="/Json/User.json";
$.getJSON(url, function (data) { //this method gets the json file and fetches the data inside it
console.log(data);
$('#show-data').empty(); //show-data is the id of div
if (data.length) {
var content="<table class='table'>";
for(var i=0;i<data.length;i++)
{
content+="<tr><td>"+data[i].Name+"</td><td>"+data[i].Address+"</td><td>"+data[i].Phone_Number+"</td></tr>";
}
content+="</table>";
$('#show-data').append(content); //this is to append the data fetched from json to the table
}
});
showData.text('Loading the JSON file.');
})

For searching the users from JSON file, add a TextBox in your Index view.

Here, I am adding a KeyUp function of JavaScript, as I want to search the data as soon as the alphabet is typed from the keyboard.

$("#Search").keyup(function (e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
DataFromJson(true);
else
$(this).data('timer', setTimeout(DataFromJson, 50)); //sets the timer between the key press from keyboard and the search
})

function DataFromJson(force)
{
var event = $("#Search").val(); //fetching the value from the textbox
var url = "/Json/User.json"; //path where Json file is saved in my project
$.getJSON(url, function (response) {
//console.log(response);
if (response.length) {
$("#tableUser").empty(); //tableUser is the id of the table
var content = "<tr><th>Name</th><th>Address</th><th>Phone Number</th></tr>";
for (var i = 0; i < response.length; i++) {
if ((response[i].Name).indexOf(event) != -1 || (response[i].Address).indexOf(event) != -1 || (response[i].Phone_Number).indexOf(event) != -1) //Name , Address and Phone_number are my attributes in User Table {
content += "<tr id='TableData'><td>" + response[i].Name + "</td><td>" + response[i].Address + "</td><td>" + response[i].Phone_Number + "</td></tr>";
}
}
$("#tableUser").append(content); //appending the list to the table
}
});
}

That's it. You can create and retrieve the data from JSON file. Searching is done without and page loads with the single alpha matching.