javascript - 在字典数组中计算相同的值，当它添加到表中时

Question

我使用表格并在点击按钮后从 JS 文件创建表格。

当我点击按钮时，它会从字典中获取数据并添加到表中。

所以我有一些位置，如果我在表格中添加一个位置，并且当我第二次点击我收到相同的位置时，它的添加值 +1 到计数器。

var users = [{
  name: "Name1",
  id: "6183",
  position: "Shift Leader",
  cardId: "0"
}, {
  name: "Name2",
  id: "6686",
  position: "Master",
  cardId: "1"
}, {
  name: "Name3",
  id: "10526",
  position: "Operator",
  cardId: "2"
}, {
  name: "Name4",
  id: "10527",
  position: "Operator",
  cardId: "3"
}, {
  name: "Name5",
  id: "10433",
  position: "Qualiti inspector",
  cardId: "4"
}];

$('#plus-button').on('click', function() {
  filterUsers(users)
});

function filterUsers(userData) {
  var msg = window.prompt("Scan operato ID card", "");
  $.each(userData, function(i, data) {
    if (msg === data.cardId) {
      groupData(data);
    }
  });
}

function groupData(data) {
  var count = 0;

  $('.positionUsers').show();
  $(".positionUsers > tbody").append('<tr class="add"><td>' + data.position + '</td><td>' + count + '</td></tr>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="plus-button">
  <p class="plus">+</p>
</button>
<table class="positionUsers hiden">
  <thead>
    <tr>
      <th colspan="3">
        Currently working at this station:
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

因此，如果我在表“运算符”中添加了一个运算符，然后再添加一个运算符，则计数 +1。

如果我添加相同的用户位置，则不允许添加到表中。

所以最后，当我点击加号时，它会检查表格上的所有数据，如果用户位置已经在表格中，它会被添加到计数器 +1

标签： javascriptjquery

Answer 1

所以首先你应该有一个变量来存储你的计数器。有2种不同的方式。您可以使用属性 count:0 扩展初始用户数组，也可以使用此属性创建另一个数组。之后我想提一下，每次要更新值时都必须清空表。请尝试我的工作示例：

var users = [{
  name: "Name1",
  id: "6183",
  position: "Shift Leader",
  cardId: "0"
}, {
  name: "Name2",
  id: "6686",
  position: "Master",
  cardId: "1"
}, {
  name: "Name3",
  id: "10526",
  position: "Operator",
  cardId: "2"
}, {
  name: "Name4",
  id: "10527",
  position: "Operator",
  cardId: "3"
}, {
  name: "Name5",
  id: "10433",
  position: "Qualiti inspector",
  cardId: "4"
}];

var usersCount = users.reduce((accumulator, c) => {
	var a =	accumulator.filter(user => user.position === c.position);
	if(a.length > 0){
		a[0].cardIds.push(c.cardId);
	}else{
		accumulator.push({position: c.position, cardIds: [c.cardId], count: 0});
	}
	
	return accumulator;
}, []);
	
$('#plus-button').on('click', function() {
  const cardId = window.prompt("Scan operato ID card", "");
	const filteredUsers = usersCount.filter(user => user.cardIds.indexOf(cardId) !== -1);
	
	if(filteredUsers.length > 0){
		filteredUsers[0].count++;
		$(".positionUsers > tbody").empty();
		usersCount.filter(user => user.count > 0).forEach(user => {
			$(".positionUsers > tbody").append('<tr class="add"><td>' + user.position + '</td><td>' + user.count + '</td></tr>');
		});
		$('.positionUsers').show();
	}else{
	alert('This card id does not exists')
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="plus-button">
  <p class="plus">+</p>
</button>
<table class="positionUsers hiden">
  <thead>
    <tr>
      <th colspan="3">
        Currently working at this station:
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>