使用 javascript 将数据提取到表中答案

【问题标题】：fetch data to table using javascript使用 javascript 将数据提取到表中
【发布时间】：2020-04-07 17:37:37
【问题描述】：

我有一个充满数据的表（从 url 获取），数据是

{
  "id": "145127236",
  "mygoals": "success",
  "future": "high",
  "dole": {
    "Key": "fhd699f"
  }
}

在表格下我有一个选择框（它的数据也是从url获取的）它的数据是这样的

[{
    "id": "1111",
    "mygoals": "getmarried",
    "future": "married",

  },
  {
    "id": "2222",
    "mygoals": "getmarried",
    "future": "married",

  },
  {
    "id": "33333",
    "mygoals": "getmarried",
    "future": "married",

  }
]

我想要实现的是，当用户从选择框中进行选择时，表格应该填充所选择的特定数据，我是 javascript 学习的初学者，这应该很容易，不知道该怎么做，这是我的代码

 <!DOCTYPE html>
 <html lang="en">

   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <style>
     </style>
   </head>

   <body>
     <div class="container">
       <table class="table table-responsive-sm ">
         <thead>
           <tr>
             <th>id</th>
             <th>mygoals</th>
             <th>future</th>
           </tr>
         </thead>
         <tbody id="t">
         </tbody>
         <thead>
           <tr>
             <th>id</th>
             <th>mygoals</th>
             <th>future</th>
           </tr>
         </thead>
         <tbody id="t2">
         </tbody>
       </table>
       <select id="Select" name="name"></select>
     </div>
     <script>
       fetch("https://asdasd.free.beeceptor.com/a", {
         method: "GET",
         headers: {
           "x-api-key": "p*****w"
         }
       }).then(res => {
         res.json().then(t => {
           console.log(t);
           var p = "";
           var p2 = "";

           p += "<tr>";
           p += "<td>" + t.id + "</td>";
           p += "<td>" + t.mygoals + "</td>";
           p += "<td>" + t.future + "</td>";
           p2 += "<td>" + t.id + "</td>";
           p2 += "<td>" + t.mygoals + "</td>";
           p2 += "<td>" + t.future + "</td></tr>";

           document.getElementById("t").insertAdjacentHTML("beforeend", p);
           document.getElementById("t2").insertAdjacentHTML("beforeend", p2);
         })
       }).catch(err => {
         console.log("ERROR: " + err);
       });

       fetch("https:******.com/", {
         method: "GET",
         headers: {
           "x-api-key": "p*****w"
         }
       }).then(res => {
         res.json().then(t => {
           for (var i = 0; i < t.length; i++) {
             var s = document.getElementById("Select");
             var o = document.createElement("option");
             option.text = t[i].id + ' ' + t[i].mygoals;
             s.add(o);
           }
         })
       })

     </script>
   </body>

 </html>

【问题讨论】：

您是想用选定的数据替换表格数据还是在表格中添加更多数据并保留旧数据
@Ivan86 替换数据
妈的，结婚你别闹！ :) 严肃地说，我们可以尝试将所有数据放入一个变量中，更改那里的值并重新填充吗？
@LearningEveryday 哈哈 :) 是的，如果它变得更容易，如果它的简单代码让初学者从中学习会很好

标签： javascript html json for-loop fetch

【解决方案1】：

为避免在更新表时重复自己，您可以创建一个 updateTable 函数，该函数从您的 fetch 中获取数据。要使用 select 更新表，可以使用 select.addEventListener('change', function(){updateTable(data)})

这是一个应该做你正在寻找的例子：

// populate table with new data
function updateTable(data, values) {
  const tbody = document.getElementById("t");
  // clear existing data from tbody if it exists
  tbody.innerHTML = "";
  var p = "";
  p += "<tr>";
  values.forEach(value => {
      p += "<td>" + data[value] + "</td>";
  })

  tbody.insertAdjacentHTML("beforeend", p);
}

// populate select options
function updateSelect(data, values) {
  for (var i = 0; i < data.length; i++) {
    var s = document.getElementById("Select");
    var o = document.createElement("option");
    // add data to option
    values.forEach(value => {
        o.textContent += data[i][value] + ' '
    })
    s.appendChild(o);
  }
}

// fetch initial data and populate table
fetch("https://asdasd.free.beeceptor.com/a", {
  method: "GET",
  headers: {
    "x-api-key": "p*****w"
  }
}).then((res) => {
  res
    .json()
    .then((data) => {
      updateTable(data, ['id', 'mygoals', 'future']);
    })
    .catch((err) => {
      console.log("ERROR: " + err);
});

// fetch optional data and update select options

// define dataArray to store additional data you fetch later
let dataArray;

// fetch additional data
fetch("https:******.com/", {
  method: "GET",
  headers: {
    "x-api-key": "p*****w"
  }
}).then((res) => {
  res.json().then((data) => {
    // store additional data in dataArray
    dataArray = data;
    // update select options
    updateSelect(data, ['id', 'mygoals']);
  });

// add event listener to trigger when new data is selected
document.getElementById("Select").addEventListener("change", function (event) {
  // capture the ID
  const chosenID = event.target.value.split(" ")[0];

  // get the data matching that ID
  const chosenData = dataArray.filter((data) => data.id === chosenID)[0];

  // update table with newly selected data
  updateTable(chosenData, ['id', 'mygoals', 'future']);
});

updateTable() 和updateSelect() 的工作方式相同，第二个参数是您想要使用的 id 数组。这允许您更改要显示的数据和/或显示的顺序。

如果您需要澄清，请告诉我

【讨论】：

它只存在一个问题，在我的“真实”选择框中，数据的名称与此处不同，例如此处“p +=””+data.id +“” ; p += "" + data.mygoals + ""; p += "" + data.future + ""; " 这很好，但是当我想更新它应该更新的表：" p += "" + data.id + ""; p += "" + data.avain+ ""; p += "" + data.name + ""; "
我不确定我理解正确，但是如果你想改变数据输出，你只需要相应地改变以下部分：`` p += ""; p += "" + data.id + ""; p += "" + data.mygoals + ""; p += "" + data.future + ""; ```
只要您的实际数据具有id 属性，并且您保留o.textContent = data[i].id，您就可以将输出（您引用的代码）更改为您想要的任何内容。
我的意思是您的代码正在运行，但更新部分应该是不同的名称，如果我像您在 cmets 中所说的那样将其更改为不同的名称，我将不会在其中包含我的默认表数据跨度>
我明白了。我更新了我的答案代码以扩展 updateTable() 和 updateSelect() 函数。你可以输入任何你想要的属性/键，例如updateTable(chosenData, ['id', 'avain', 'name']);