javascript - 使用 javascript 将数据提取到表中
问题描述
我有一个充满数据的表(从 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>
解决方案
为避免在更新表时重复自己,您可以创建一个updateTable
从您的 fetch 中获取数据的函数。要使用选择更新表,您可以使用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 数组。这允许您更改要显示的数据和/或显示的顺序。
如果您需要澄清,请告诉我
推荐阅读
- android - Flutter:任务“:app:processDebugGoogleServices”执行失败
- microservices - 在微服务中提供静态文件
- c# - EF 在插入和更新子表记录时出错
- c# - C# 选择单节点问题
- c++ - 如何更新矢量或地图的值
- r - 绘制 shapefile 和点时的整数(0)
- python - Python:解释器是否像 any([implicit for loop]) 那样优化语句?
- dictionary - 初始化地图时如何设置容量可以防止重新散列
- css - 当定义了背景颜色时,为什么css按钮背景颜色在悬停时不会改变?
- sql - MS SQL 在整个列中查找一个值,如果找到则返回 true