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.

1. Add a Contoller to your project.
   
2. Add an ActionResult method, named as Index in your controller.
3. Now, add a view to the Index and do the following steps in your view.

@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.

<input type="text" id="Search"  placeholder="Enter data"/>

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.