CODEWITHSUNDEEP
javascriptjqueryjsonhtmljquery-ui
Jignesh Patel
Jignesh Patel

Reputation: 447

Insert/Update new Record in JSON (External Local File) with Javascript or jQuery

I am populating a list from a External JSON file only using client side scripting.

Now, my requirement is to insert/update any record to the same file without using any server side code.

For populating the records from JSON I have done the client side scripting and the html of listing the records of JSON, as mentioned below:

Client Side Scripting:

function LoadJson(){
    $(document).ready(function(){   
        $.ajax({
            type: 'GET',
            url: "js/data.json",
            async: false,
            dataType: "text",
            error: function(e){
                LoadingIssues();
            },
            success: function (data) {
                var json = $.parseJSON(data);
                var apdata = "";
                console.log(json);
                for(var i=0; i<json.length;i++){
                    apdata = "<tr>";
                    apdata += "<td><a onclick='SaveData();' href='javascript:;'>Edit</a></td>";
                    apdata += "<td>" + json[i].Name + " <strong>From:</strong> " + json[i].City + "</td>";
                    apdata += "</tr>";
                    console.log(apdata);
                    $("#dataJson tbody").append(apdata);
                }
            }
        });
    })
}
function LoadingIssues(){
    $(".issue").html('<h3>There is some issue while loading data. Please try again later.</h3>');
}
LoadJson();
function SaveData(){
    /*Code to insert/update JSON data*/
}

HTML of Listing with JSON data:

<div class="col-lg-12">
    <form>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th colspan="5">Employee Details</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Name</th>
            <td><input type="text" name="txtName" id="txtName" class="form-control"></td>
            <th>City</th>
            <td><input type="text" name="txtCity" id="txtCity" class="form-control"></td>
            <th> <input type="button" value="Submit to JSON" class="btn btn-default" onClick="SaveData()">
            </th>
          </tr>
        </tbody>
        <tfoot>
        </tfoot>
      </table>
    </form>
    <h1>Listing</h1>
    <table id="dataJson" class="table table-bordered">
      <thead>
      <th width="100px">Edit</th>
        <th>Name</th>
          </thead>
      <tbody>
      </tbody>
    </table>
    <div class="issue"></div>
  </div>

Can anyone suggest how to insert/update the JSON file using client side scripting?

Thank you.

Upvotes: 3

Views: 1050

Answers (2)

James
James

Reputation: 303

You could use either straight AJAX or jQuery AJAX Post method.

see Coder Quick Reference

Upvotes: 0

alodium
alodium

Reputation: 135

I don't see how you can do this without server side scripting. But about the client side, other than just posting the new JSON to the server, and get back the same results (or just use your updated JSON), you can read:

createObjectURL()

(supported in most modern browsers)

Or using the file API, but I am not sure if it can help you remotely. You will need to deal with it locally and send it to the server that will need to know what to do with it. So in any case, its like holding a JSON in the memory of the browser, manipulate it and send it. No need for file manipulations.

File API

Upvotes: 1

Related Questions