写入 javascript 中的 JSON 文件

Question

我有一个来自 app-drawer-template 的 polymer 包结构，其中有一个名为 src 的文件夹。在此文件夹中，我有一个名为 entries.json 的文件。我试图弄清楚当用户从纸质对话框提交表单数据时如何向此 json 对象添加项目。我了解如何从此表单中获取值。我似乎无法弄清楚如何从 json 文件中获取内容并向此 json 添加一个新项目，然后将新项目写回 .json 文件。

这是我的表格：

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

这里是 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);
      }

我一直在尝试，但我从 chrome 控制台看到，当我使用 JSON.parse() 时，它期望输入是 json 格式的文本字符串，而不是文件路径。有没有办法从这个文件中读取然后在 javascript 中写回它？该文件不存储在用户的存储中，而仅存储在我的包结构中。

编辑：

感谢 chrisv，我能够读取并附加到我的 json，但我仍然需要一种方法来重写此 json 文件。这是我的新 javascript 函数，它将成功获取我的 json 文件并添加一个新条目，然后将其显示在控制台中。有没有一种简单的方法可以用新行重写这个 .json 文件？

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);
        });
      }

Answer 1

那是因为 JSON Parse 期望解析一个字符串或其他输入，而不是加载然后解析的文件路径。

我建议使用 jQuery（如果您愿意，也可以使用其他方式）来加载文件。

然后你可以这样做：

$.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
});

您可以在此处阅读有关 jQuery getJSON() 的更多信息：http://api.jquery.com/jquery.getjson/

注意：由于 JavaScript 本身不允许交叉引用查询（同源策略），您必须运行在服务器上或模拟本地服务器。 IE。运行以任何其他方式通过 MAMP 或本地主机连接它。在之前链接的 URL 和此处阅读相关信息：https://en.wikipedia.org/wiki/Same-origin_policy

编辑：找到与您的问题相关的先前回答 post：

写入 javascript 中的 JSON 文件

Write to JSON file in javascript

html

javascript

json

polymer-1.0