在 javascript 中写入 JSON 文件

Question

我有一个来自 app-drawer-template 的聚合物包结构，其中包含一个名为 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 或 localhost 运行它。在之前链接的 URL 和此处阅读它：https://en.wikipedia.org/wiki/Same-origin_policy

编辑： 找到与您的问题相关的先前已回答的帖子：https://stackoverflow.com/a/19473929/4315724