How to display json file in html table

My json file:

{"data":[{"index":"3","part":""}]},{"data":[{"index":"6","part":""}]},

And the javascript, getTasks() display the json file in table, but in json format, but i need show it in other column and other rows

async function getTasks(){
 const task = await request('GET', '/WebService/todo.json');
  document.getElementById("todoList").innerHTML=task
}
getTasks()
}


function addTodosToPage() {
 var table = document.getElementById("todoList");
 var tr = document.createElement("tr");
 var index = document.getElementById('index').value;
 var part = document.getElementById('part').value;
 tr.innerHTML = "<td>" + index + "</td><td>" + part + "</td>";
 table.appendChild(tr);


 todo_index++;


 tr.id = "todo-" + todo_index;

 var index = document.getElementById('index').value;
 var part = document.getElementById('part').value;

 tr.innerHTML = "\
 <td><input name='select-row' type='checkbox' value='" + todo_index + "'></td>\
 <td>" + index + "</td>\
 <td>" + part + "</td>\
 <td><button onclick='removeTodo(" + todo_index + ");'>x</button></td>";
 table.appendChild(tr);
}

function getFormData() {
   var index = document.getElementById("index").value;


   var part = document.getElementById("part").value;


   console.log("Index: " + index + " part: "+ part);
   var todoItem = new Todo(index, part);
   todos.push(todoItem);
   addTodosToPage(todoItem);
   saveTodoData();

}

HTML

<table class="table table-bordered table-striped">
  <thead>
    <tr>

      <th><input onchange="toggleSelection(this);" type='checkbox'></th>
      <th>Index</th>
      <th>Part</th>
      <th><button onclick='removeSelectedTodos();'>x</button></th>
    </tr>
  </thead>
  <tbody id="todoList">
  </tbody>
</table>