Javascript 使用html按钮更改json

嗨，当我想用html中的按钮删除json条目时，我遇到了这个问题。现在我的结构是

/data.json

，

/views/home.handlebar

，

/public/js/home.js

，

public/routes/home.js

，

等。我试图定义一个带有
标记的函数，但它无法工作，因为控制台显示
“数据未定义”

下面是
data.json

{

"receipts": [

    {
        "receipt_ID": "1",
        "purchase_month": "2",
        "purchase_day": "12",
        "purchase_year": "2017",
        "seller": "Trader Joe's",
        "#_of_items": "3",
        "items_array": [ "1001", "1002", "1003" ],
        "imageURL": "",
        "uploader_ID": "Dominic",
        "note": "Dominic bought this at TJ",
        "deleted": "0"
    },

    {
        "receipt_ID": "2",
        "purchase_month": "2",
        "purchase_day": "10",
        "purchase_year": "2017",
        "seller": "Von's",
        "#_of_items": "2",
        "items_array": [ "2001", "2002" ],
        "imageURL": "",
        "uploader_ID": "Dominic",
        "note": "Dominic bought this at Vons",
        "deleted": "0"
    }
],

"item": [
        {
            "receipt_ID": "1",
            "item_index": "1",
            "item_ID": "1001",
            "item_catalog": "fruit",
            "item_name": "Apple",
            "item_imageURL": "/image/item_icon/apple.png",
            "expiration_month": "2",
            "expiration_day": "28",
            "expiration_year": "2017",
            "price_per_unit": "1.99",
            "unit": "lbs",
            "amount": "3.2",
            "total_price": "6.37",
            "shareable": true,
            "wasted": "0",
            "used_up": "0"
        },

        {
            "receipt_ID": "1",
            "item_index": "2",
            "item_ID": "1002",
            "item_catalog": "drink",
            "item_name": "Diet Coke",
            "item_imageURL": "/image/item_icon/drinks.png",
            "expiration_month": "8",
            "expiration_day": "31",
            "expiration_year": "2017",
            "price_per_unit": "0.99",
            "unit": "count",
            "amount": "5",
            "total_price": "4.95",
            "shareable": true,
            "wasted": "0",
            "used_up": "0"
        }]
    }

下面是html函数调用以及
标记

<ul class="private_shelf">
  {{#each item}}
  <li herf="/item/{{item_ID}}" class="food">
    {{item_name}}
    <img src="{{item_imageURL}}" class="food_icon">
  </li>
  <button onclick="removeItem({{item_index}})">Remove Item</button> {{/each}}
</ul>

<script>
  function removeItem(cid) {
    console.log("removing");
    data.item.splice(cid, 1);
  }
  $.getJSON('data.json', function(data) {
    //do stuff with your data here
  });
</script>


{{{#每项}

{{item_name}}

删除项{/each}

功能删除项（cid）{
控制台日志（“删除”）；
数据项拼接（cid，1）；
}
$.getJSON（'data.json'，函数（数据）{
//在这里处理你的数据
});

当我将脚本部分放在
public/js/home.js
中时，函数会正确地调用（控制台显示
“删除”
），但它说这里没有定义数据，或者定义了require（）

但是当我将函数放入
routes/home.js
中时，该函数根本没有被调用

如何从html中的按钮中删除
data.json
中的条目，以及javascript函数应该位于哪个文件中

提前谢谢

更新：

我正在做
$.getJSON（'/data.json'，函数（data）{data=data；}）现在，但控制台仍然会响应“GET localhost:3000/data.json 404 NOT FOUND”
中的变量数据在
removietem
中不可访问，因为变量是函数范围的

尝试在父作用域中创建变量，以便在
removietem
函数中可以访问该变量

var data;

function removeItem(cid) {
  console.log("removing");
  if (data) {
    data.item.splice(cid, 1);
  } else {
    console.log("data is not fetched yet")
  }
}


$.getJSON('data.json', function(data) {
  //do stuff with your data here
  data = data;
});

**根据您的js，可能有更好的方法，但您可以试一试。
中的变量数据在
removietem
中不可访问，因为变量是函数范围的

尝试在父作用域中创建变量，以便在
removietem
函数中可以访问该变量

var data;

function removeItem(cid) {
  console.log("removing");
  if (data) {
    data.item.splice(cid, 1);
  } else {
    console.log("data is not fetched yet")
  }
}


$.getJSON('data.json', function(data) {
  //do stuff with your data here
  data = data;
});

**根据您的js，可能有更好的方法，但您可以试一试。
您需要使用nodejs进行此操作。您的数据对象在哪里？全局变量？我的数据对象立即位于根文件夹中。因此，如果html位于/views/home.handlebar中，json位于/data.json中，您需要使用nodejs进行此操作。您的数据对象在哪里？全局变量？我的数据对象立即位于根文件夹中。因此，如果html位于/views/home.handlebar中，json位于/data.jsonTanks中，我发现我没有首先声明变量。还有一个问题：现在getJSON函数正试图从localhost:3000/data.json获取json文件，但它不在那里。我们的文件层次结构如下所示：root{public{css{}js{home.js}routes{home.js}app.js data.json}它立即位于根文件夹中，然后您可以用
/
->
'/data.json'
开始path，因为以
/
开始的路径是相对于根的。@FangYuxiao:有用吗？谢谢，我发现我没有在这里首先声明变量。还有一个问题：现在getJSON函数正在尝试从localhost:3获取json文件000/data.json，但它不在那里..我们的文件层次结构如下所示：根{public{css{}js{home.js}路由{home.js}}app.js data.json}它立即位于根文件夹中，然后您可以用
/
->
'/data.json'
启动路径，因为以
/
启动的路径是相对于根的。@FangYuxiao:有帮助吗？