javascript - 如何使用返回的 JSON 对象来填充表，而不是填充您自己的数组

Question

下面是我的代码，显然它不会运行，因为我有外部资源可以从中提取。我的主要问题是我无法从 onQuerySucc 获取 listItemInfo 以显示在 buildTable 函数的表中。有谁知道我该怎么做？当我填充数组本身时，我让它工作，但我不想那样做。

onQuerySucc(data) 运行后，它会显示它提取的列表项信息，如下所示：

姓名：Deacon Landen -年龄：34 -职位：初级开发人员 -办公室：查尔斯顿-教育：UVA -学位：法律

我怎样才能让它填充到我的表中，这样我就不必手动填充员工数组了？

$(function() {
  $("#btnSubmit").on("click", function() {
    getListData();
  });
});

function getListData() {
  var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";

  $.ajax({
    url: fullUrl,
    type: "GET",
    headers: {
      "accept": "application/json;odata=verbose",
      "content-type": "application/json;odata=verbose",
    },
    success: onQuerySucc,
    error: onQueryFlop
  });
}

function onQuerySucc(data) {
  var listItemInfo = "";
  $.each(data.d.results, function(key, value) {
    listItemInfo += '<b>Name:</b> ' + value.Title + ' – <b>Age:</b> ' + value.Age + ' - <b>Position:</b> ' + value.Position + ' - <b>Office:</b> ' + value.Office + ' - <b>Education:</b> ' + value.Education + ' - <b>Degree:</b> ' + value.Degree + '<br/>';
  });
  $("#divResults").html(listItemInfo);
  alert('Successfully pulled list items');
}

function onQueryFlop() {
  alert('Error! Could not read list items');
}

$(function() {
  $("#btnSubmit1").on("click", function() {
    buildTable();
  });
});

function buildTable(data) {
  var employees = new Array();
  employees.push(["Name", "Age", "Position", "Office", "Education", "Degree"]);
  employees.push(["Deacon Landen", "34", "Jr. Developer", "Charleston", "UVA", "Law"]);
  employees.push(["Leon Brooklyn", "19", "Intern", "Charleston", "Richmond", "Civil Engineering"]);
  employees.push(["Dederick Dell", "26", "Sr. Developer", "Richmond", "Georgia", "Electrical Engineering"]);
  employees.push(["Jojo Vincent ", "46", "Chief Financial Officer", "Richmond", "Ole Miss", "Business Admin"]);
  employees.push(["Nelly Jerred", "41", "Program Analyst", "Charleston", "Columbia", "Computer Science"]);
  employees.push(["Brendan Diaz", "46", "Chief Operating Officer", "Stafford", "Alabama", "MIS"]);

  //Create a HTML Table element.
  var table = document.createElement("TABLE");
  table.border = "1";

  //Get the count of columns.
  var columnCount = employees[0].length;

  //Add the header row.
  var row = table.insertRow(-1);
  for (var i = 0; i < columnCount; i++) {
    var headerCell = document.createElement("TH");
    headerCell.innerHTML = employees[0][i];
    row.appendChild(headerCell);
  }

  //Add the data rows.
  for (var i = 1; i < employees.length; i++) {
    row = table.insertRow(-1);
    for (var j = 0; j < columnCount; j++) {
      var cell = row.insertCell(-1);
      cell.innerHTML = employees[i][j];
    }
  }

  var tblResults = document.getElementById("tblResults");
  tblResults.innerHTML = "";
  tblResults.appendChild(table);
  alert('Successfully displayed items in Table Format');
}

<div>
  <input id="btnSubmit" type="button" data-dpmaxz-eid="45" value="Click Here for EmployeeInfo" />&#160;<br/></div>
<div id="divResults">​​​&lt;br/></div>
<br>
<div>
  <input id="btnSubmit1" type="button" data-dpmaxz-eid="45" value="Click Here for Table View" />&#160;<br/></div>
<div id="tblResults">​​​&lt;br/></div>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="/dataTables.bootstrap4.min.css">
<br>

标签： javascriptjqueryajax

Answer 1

buildTables应该employees从它的参数中获取，而不是对数组进行硬编码。然后buildTables()从 的success:选项中调用getListData()。

$(function() {
  $("#btnSubmit").on("click", function() {
    getListData();
  });
});

function getListData() {
  var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";

  $.ajax({
    url: fullUrl,
    type: "GET",
    dataType: 'json',
    success: buildTable,
    error: onQueryFlop
  });
}

function onQueryFlop() {
  alert('Error! Could not read list items');
}

function buildTable(employees) {
  var headings = ["Name", "Age", "Position", "Office", "Education", "Degree"];

  //Create a HTML Table element.
  var table = document.createElement("TABLE");
  table.border = "1";

  //Add the header row.
  var row = table.insertRow(-1);
  headings.forEach(h => {
    var headerCell = document.createElement("TH");
    headerCell.innerHTML = h;
    row.appendChild(headerCell);
  });

  //Add the data rows.
  for (var i = 0; i < employees.length; i++) {
    row = table.insertRow(-1);
    headings.forEach(h => {
      var headerCell = document.createElement("TD");
      headerCell.innerHTML = employees[i][h];
      row.appendChild(headerCell);
    });
  }

  var tblResults = document.getElementById("tblResults");
  tblResults.innerHTML = "";
  tblResults.appendChild(table);
  alert('Successfully displayed items in Table Format');
}

<div>
  <input id="btnSubmit" type="button" data-dpmaxz-eid="45" value="Click Here for EmployeeInfo" />&#160;<br/></div>
<div id="divResults">​​​&lt;br/></div>
<br>
<div>
  <input id="btnSubmit1" type="button" data-dpmaxz-eid="45" value="Click Here for Table View" />&#160;<br/></div>
<div id="tblResults">​​​&lt;br/></div>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="/dataTables.bootstrap4.min.css">
<br>