Write to JSON file in javascript

Question

I have a polymer package structure from the app-drawer-template, with a folder named src. In this folder I have a file called entries.json. I am trying to figure out how to add items to this json object when a user submits form data from a paper-dialog. I understand how to get the values from this form. I can't seem to figure out how to get the contents from the json file and add a new item to this json and then write the new item back to the .json file.

here is my form:

<paper-dialog id="applynow" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
      <paper-dialog-scrollable>
        <img src="/images/logo.png" width="80%" height="auto" style="margin: 0 auto;"/>
        <paper-input id="name" label="Full Name"></paper-input>
        <paper-input id="phone" label="Phone Number"></paper-input>
        <paper-input id="email" label="Email"></paper-input> 
        <paper-textarea id="desc" label="Why Pick You?" char-counter maxlength="400"></paper-textarea>
        <paper-button on-click="submitForm">Submit</paper-button>
      </paper-dialog-scrollable>
      </paper-dialog>

And here is the javascript:

submitForm: function() {
        var data = JSON.parse("/src/entries.json");
        data.entries.push({
          name: this.$.name.value,
          phone: this.$.phone.value,
          email: this.$.email.value,
          desc: this.$.desc.value
        });
        data = JSON.stringify(data);
      }

I have been trying but I see from the chrome console that when I use JSON.parse() it is expecting the input to be a json formated string of text, not a filepath. Is there a way to read from this file and then write back to it in javascript? This file is not stored on the user's storage but just in my package structure.

EDIT:

Thanks to chrisv I was able to read and append to my json but I still need a way to rewrite this json file. Here is my new javascript function that will successfully grab my json file add a new entry and then display it in the console. Is there an easy way to rewrite this .json file with the new line?

submitForm: function() {
        var newName = this.$.name.value;
        var newPhone = this.$.phone.value;
        var newEmail = this.$.email.value;
        var newDesc = this.$.desc.value;
        var json = $.getJSON("src/entries.json", function(data) {
          data.entries.push({
            name: newName,
            phone: newPhone,
            email: newEmail,
            desc: newDesc
          });
          console.log(data);
        });
      }

You would need a service which takes the new entries and saves them to the file. Since they are not in the user's storage, there is no way to write to them, except via server. You may want to rethink how you are getting and storing the file. — Heretic Monkey
– Heretic Monkey, Commented Jun 17, 2016 at 21:36
I decided to go with the route of rethinking how im saving this information. I was already using Firebase for hosting so i just went with Firebase data storage. — Nicholas Pesa
– Nicholas Pesa, Commented Jun 17, 2016 at 22:48

Community · Accepted Answer · 2017-05-23 12:08:13Z

2

That's because JSON Parse expect a string or other input to parse, NOT a filepath to load and then parse.

I recommend using jQuery (or something else if you prefer it) to load the file.

Then you can do:

$.getJSON( "file/path/entries.json", function( data ) {
    //Data loaded here
    //Do whatever you want with the data
}
.fail(function(){
    //Handle error with reading json file here
});

You can read more about jQuery getJSON() here: http://api.jquery.com/jquery.getjson/

NOTE: Since JavaScript not natively allow cross-reference queries(same origin policy), you'll have to run it on a server or simulate a local server. I.e. running it through MAMP or localhost in any other way. Read about it in the previously linked URL and here: https://en.wikipedia.org/wiki/Same-origin_policy

Edit: Found a previously answered post that relate to your problem: https://stackoverflow.com/a/19473929/4315724

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 17, 2016 at 21:04

chrisv

7356 silver badges18 bronze badges

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

3 Comments

Nicholas Pesa Over a year ago

Hey I appreciate the answer but I still need to rewrite this .json file with the new entry. Is there an easy way to write back to this json file from javascript, or would this take php or some other language to complete this? I have editted my post with my javascript changes like you specified.

chrisv Over a year ago

It's important to notice that JavaScript is a client side language, that should NOT mess with the server side data sources... In order to update your json-file, you should either connect / host your data source on a server with a REST API to post updates this way, OR you could create a server-side (PHP) solution in order to create your own "post" method to the json-file. Maybe the answer here can help you out: stackoverflow.com/a/20948680/4315724

Nicholas Pesa Over a year ago

The answers are very appreciated, and I've been reading around and understand the logic a little more now. I'm going with a data storage service now that will prove to make things easier. Nonetheless the help is always appreciated

Collectives™ on Stack Overflow

Write to JSON file in javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related