问JSON点击时增加价值
EN

Stack Overflow用户

提问于 2020-01-26 22:26:15

回答 2查看 64关注 0票数 0

我正在尝试建立一个餐厅的网站，现在正在做一些桌位预订。到目前为止，我有一个问题:我有一个表的JSON，并希望在单击表时向其添加日期(天/时间)。问题的下一步-当我单击某个表时，日期会添加到所有JSON元素中。我只想将它添加到我单击的元素中。这里是codepen：https://codepen.io/wilchilly/pen/qBEvegW的链接(要查看结果，请单击某个表并打开控制台)

我的HTML：

<p class="href-to italic" id="showMore">Show tables</p>

<div class="wrapper" id="wrapper">
  <div class="tables-wrapper" id="tables-wrapper"></div>
</div>

JS：

fetch('tables.json')
.then(response => response.json())
.then(json => {
    const myJson = json;
    let showTables = document.getElementById('showMore');

    //show elements on page
    function loadGoods(data) {
        let out = '';
        for (let key in data) {
            if (data[key].isAvailable == false) {
                out += '<div class="single-table not-available"  data-name="' + data[key]['name'] + '" data-art="' + data[key]['id'] + '">';
                out += '<h4>' + data[key]['name'] + '</h4>';
                out += '<p>' + data[key]['location'] + '</p>';
                out += '</div>';
            } else {
                out += '<div class="single-table"  data-name="' + data[key]['name'] + '" data-art="' + data[key]['id'] + '">';
                out += '<h4>' + data[key]['name'] + '</h4>';
                out += '<p>' + data[key]['location'] + '</p>';
                out += '</div>';
            }
        }

        $('#tables-wrapper').html(out);
    }

    //set Date (day/time)
    function setDate() {
        for (let key in myJson) {
            myJson[key]['date']['day'] = '10/02';
            myJson[key]['date']['time'] = '20:00';
        }
        console.log(myJson);
    }

    showTables.addEventListener('click', function () {
        loadGoods(myJson);

        let singleTable = document.getElementsByClassName('single-table');
        Array.from(singleTable).forEach(function (element) {
            element.addEventListener('click', setDate);
        });
    });

})

JSON：

    [
    {
        "id": 0,
        "index": 0,
        "name": "Table 1",
        "capacity": 5,
        "isAvailable": true,
        "location": "Bar",
        "date": {
            "day": " ",
            "time": ""
        }
    },
    {
        "id": 1,
        "index": 1,
        "name": "Table 2",
        "capacity": 5,
        "isAvailable": true,
        "location": "Patio",
        "date": {
            "day": " ",
            "time": " "
        }
    },
    {
        "id": 2,
        "index": 2,
        "name": "Table 3",
        "capacity": 5,
        "isAvailable": true,
        "location": "Bar",
        "date": {
            "day": " ",
            "time": " "
        }
    },
    {
        "id": 3,
        "name": "Table 4",
        "capacity": 6,
        "isAvailable": true,
        "location": "Inside",
        "date": {
            "day": " ",
            "time": " "
        }
    }
]

javascript

json

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-27 00:26:53

我找到了一个解决方案。这可能会对有类似问题的人有所帮助。

function setDate() {
  let inputDay = document.getElementById('form-data').value;
  let inputTime = document.getElementById('form-time').value;

  for (let i = 0; i < myJson.length; i++) {
    if (this.getAttribute('data-art') == myJson[i].id) {
      myJson[i]['date']['day'] = inputDay;
      myJson[i]['date']['time'] = inputTime;
    }
  }
}