javascript - 如何在 html 表中从控制台更改显示 json 的类型

Question

在我的 html 代码中，我正在显示 json 文件，该文件在控制台中显示之后。现在来自 json 的数据以 json 格式显示，但我需要将此数据调整为 html 表，并在 html 表中以简单字符串或数字显示数据。这是功能：

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

  }
   getTasks()
  }

我想我应该需要添加这样的东西：

 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);

但我不知道我是怎么错的，或者我错了。请帮助我。

@edit 所有 javascript 文件：

var todos = new Array();
var todo_index = 0;
window.onload = init;

function init() {
    var submitButton = document.getElementById("submit");
    submitButton.onclick = getFormData;
    getTodoData();
}

function getTodoData() {
    function request(method, url, data=null) {
        return new Promise((resolve, reject)=> {
            const xhr = new XMLHttpRequest;
            xhr.timeout = 2000;
            //xhr.responseType = 'json';
            xhr.onreadystatechange = (e) => {
                if(xhr.readyState === 4){
                    xhr.status === 200 ? resolve(xhr.response) : reject(xhr.status)
                }
            }
            xhr.ontimeout = () => reject('timeout');
            xhr.open(method, url, true);

            if(method.toString().toLowerCase() === 'get') {
                xhr.send(data)
            } else {
                xhr.setRequestHeader('Accept','application/json');
                xhr.setRequestHeader('Content-type', 'application/json');
                xhr.send(data)
            }
        })
    }
async function getTasks(){
  const task = await request('GET', '/WebService/todo.json');
   document.getElementById("todoList").innerHTML=task
}
getTasks()
}

function parseTodoItems(todoJSON) {
    if (todoJSON == null || todoJSON.trim() == "") {
        return;
    }
    var todoArray = JSON.parse(todoJSON);
    if (todoArray.length == 0) {
        console.log("Błąd: Tabela jest pusta!");
        return;
    }
    for (var i = 0; i < todoArray.length; i++) {
        var todoItem = todoArray[i];
        todos.push(todoItem);
    }
}

function checkInputText(value, msg) {
    if (value == null || value == "") {
        alert(msg);
        return true;
    }
    return false;
}        
function Todo(index, part) {
    this.index = index;
    this.part = part;
}



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();

}

function checkInputText(value, msg) {
    if (value == null || value == "") {
        alert(msg);
        return true;
    }
    return false;
}        

function saveTodoData() {
    var todoJSON = JSON.stringify(todos);
    var request = new XMLHttpRequest();
    var URL = "save.php?data=" + encodeURI(todoJSON);
    request.open("GET", URL);
    request.setRequestHeader("Content-Type",
                             "text/plain;charset=UTF-8");
    request.send();
}
function removeTodo(index) {

  var row = document.getElementById('todo-' + index);


  if (row) {

    row.parentNode.removeChild(row);
  }


  todo_index--;
}


function toggleSelection(checkbox) {

  var rowsToSelect = document.querySelectorAll('input[name=select-row]');

  for (var i = 0; i < rowsToSelect.length; i++) {

    rowsToSelect[i].checked = checkbox.checked;
  }
}

function removeSelectedTodos() {

  var rowsToRemove = document.querySelectorAll('input[name=select-row]:checked');

  for (var i = 0; i < rowsToRemove.length; i++) {

    removeTodo(rowsToRemove[i].value);
  }
}



function setselection(){
  var project = document.getElementById('todoList').value;
  document.cookie = 'todotabel=' + project;
}



function getselection(){
  var name = 'todotabela=';
  var x = document.cookie.split(';');
  var i = 0, c = 0;
  for(i = 0; i < x.length; i++) {
    c = x[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(selectedProject) === 0) {
      return c.substring(name.length, c.length);
    }
  } return '';
}

function remove() {

  var arr = [];
  var obj = {
    'index': document.getElementById("index").value
  };
  for (var i = arr.length - 1; i >= 0; i--) {
    if (arr[i]['index'] === obj['index']) {
      arr.splice(i, 1);
    }
  }
  localStorage.removeItem("user", JSON.stringify(arr));

}

function appendLocalStorage(keys, data) {
  var old = localStorage.getItem(index);
  if (old === null) old = "";
  localStorage.setItem(index, old + data);
}

function addTo() {
  var arr = [];
  var obj = {
    'index': document.getElementById("index").value,
    'part': document.getElementById("part").value,

  };

  if (!arr.some(e => e['index'] == obj['index'])) {

    arr.push(obj);
  } else {
    arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index'] == obj['index'])[0][0]] = obj;
  }
  appendLocalStorage("user", JSON.stringify(arr));
  alert(localStorage.getItem("user"));
}

和Json文件

[{"data":[{"index":"2","part":"2"}]}][{"data":[{"index":"1","part":"4"}]}]

标签： javascripthtmljson