Creating Json File And Searching Data From Json File Using JavaScript

In this blog, you will learn how to create a JSON file and search the data from a 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.