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

Question

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.

no you cant do that.

Cerlin
– Cerlin

2015-08-21 07:10:59 +00:00
Commented Aug 21, 2015 at 7:10 — Cerlin
– Cerlin, Commented Aug 21, 2015 at 7:10

Billal BEGUERADJ · Accepted Answer · 2017-07-10 11:47:33Z

1

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

edited Jul 10, 2017 at 11:47

Billal BEGUERADJ

23k45 gold badges125 silver badges142 bronze badges

answered Aug 21, 2015 at 7:25

alodium

13512 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James · Accepted Answer · 2021-02-28 15:38:53Z

0

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

see Coder Quick Reference

answered Feb 28, 2021 at 15:38

James

3531 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related