Как создать динамическую таблицу c при изменении переменной?

Question

Я поймал понимание того, как загрузить динамическую таблицу c, в которой результирующий массив, отображаемый в таблице динамического c, фильтруется из большего массива.

- скрипт не выполняет не запускается в JSFiddle, в противном случае я бы связал пример -

Что происходит в настоящее время, так это то, что при каждом нажатии кнопки отфильтрованный массив результатов помещается в массив, который используется в динамическом c Таблица. Я вижу проблему, которая использует метод pu sh () .

Я не могу настроить свой синтаксис, возможно, вместо , выдвигающего отфильтрованного результаты в массив, мне нужно иметь возможность заменять весь массив каждый раз.

Код

var chars = {
  [0671]: {
    tier: 1,
    name: 'John Doe',
    id: '7813',
  },
  [0748]: {
    tier: 1,
    name: 'Jane Doe',
    id: '5461',
  },
  [0478]: {
    tier: 2,
    name: 'Billy Bob',
    id: '8246',
  },
  [0475]: {
    tier: 2,
    name: 'Cindy Bob',
    id: '9634',
  },
};

//var tierChoice updates onclick, runs *result function*
var tierChoice = 1;

function tierSelect(tierVar) {
  tierChoice = tierVar;
  results();
}

//*result function* filters var chars, pushes into var results
var result = [];

function results() {
  for (var i in chars) {
    if (chars[i].tier == tierChoice) {
      result.push(chars[i]);
    }
  }
  charStats();
}

//*charStats function* creates a dynamic table, using a filtered array from var results
function charStats() {
  var buf = '';
  var header = '<tr><td width="100px">Name</td><td width="100px">ID</td></tr>';
  for (var i in result) {
    buf += '<tr>\n';
    buf += '<td>' + result[i].name + '</td>\n';
    buf += '<td>' + result[i].id + '</td>\n';
    buf += '</tr>\n';
  }
  document.getElementById("demo").innerHTML = header + buf;
}

<table style="margin:0 auto;">
  <tr>
    <td><input type="button" value="Tier 1" onclick="tierSelect(1)"></input>
    </td>
    <td><input type="button" value="Tier 2" onClick="tierSelect(2)"></input>
    </td>
  </tr>
</table>
<!-- dynamic table is HTML below -->
<table border="border:1px solid #fff" style="border-collapse:collapse; margin:0 auto" id="demo">
</table>

Вкратце: нажатие на первую кнопку должно привести к тому, что Джон Доу и Джейн Доу вместе с их идентификаторами войдут в результат, а нажатие на вторую кнопку должно привести к появлению Синди Боб и Билли Боб вместе с их идентификаторами в результате, что почти правильно сделано, но проблема в том, что они добавляются к предыдущим результатам, а не переопределяют их.

Answer 1

Ваш код почти правильный, вам просто нужно повторно инициализировать result внутри results:

function results() {
  result = [];
  for (var i in chars) {
    if (chars[i].tier == tierChoice) {
      result.push(chars[i]);
    }
  }
  charStats();
}

Кроме того, вам не нужно закрывать теги input, так как они атомарные c, поэтому измените HTML на

<table style="margin:0 auto;">
  <tr>
    <td><input type="button" value="Tier 1" onclick="tierSelect(1)">
    </td>
    <td><input type="button" value="Tier 2" onClick="tierSelect(2)">
    </td>
  </tr>
</table>

Fiddle: https://jsfiddle.net/het26c1n/