Изменить строки таблицы HTML с помощью JS

HTML

<table class="td-r" style="width: 740px;">
            <thead >
              <tr>
                
                <th style="width: 520px;">Price</th>
                <th >|</th>
                <th style="text-align: end;">Name</th>
              </tr>
            </thead>
            <tbody id ="dfd">{% for item in dataset %}
                <tr>
                
                <td >{{ item.0 }}</td>
                <td>|</td>
                <td style="text-align: end;">{{ item.1 }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        <div class="pay_btn">
        <button style="width: 560px;height: 125px;  border: 0px;background-color: rgba(28,28,28,0)">       </button>
        </div>

JS

<script>
    setInterval(function(){
        var xhr = new XMLHttpRequest()
        xhr.open(
        'GET',
        'http://127.0.0.1:5000/df',
        true
        )
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState != 4) {
                return
            }
            var data = xhr.responseText;
            var jsonResponse = JSON.parse(data);
            
            
            console.log(xhr.responseText)    
        }

    },1000);
    </script>

Пример JSON который получаю:

[
  {
    "0": "\u0428\u0435\u0439\u043a\u0435\u0440 Biotech Wave Shaker 600 \u043c\u043b", 
    "1": "123"
  }, 
  {
    "0": null, 
    "1": null
  }
]

Как мне перерисовать строки если Json вернет другие значения. Наример больше строк или название разное.