Question

嗨，当我想用html中的按钮删除我的json条目时，我遇到了这个问题。现在我的结构为/data.json，/views/home.handlebars，/public/js/home.js，public/routes/home.js，etc。我尝试使用<script>标记定义一个函数，但由于控制台显示"data is not defined"

，因此无效

以下是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函数调用，以及<script>标记

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

当我将脚本部分放在public/js/home.js中时，函数调用正常（控制台显示"removing"），但它表示此处未定义数据，并且要么定义了require（）。

但是当我将函数放在routes/home.js中时，根本不会调用该函数。

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

提前致谢。

更新： Here is my folder hierarchy

我现在正在做$.getJSON('/data.json', function(data){ data = data; });，但控制台仍然响应“GET localhost：3000 / data.json 404 NOT FOUND

Answer 1

removeItem中无法访问的变量数据作为变量是函数作用域。

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

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，有更好的方法可以做到这一点，但你可以试一试。

用html按钮改变json

1 个答案: