我尝试创建一个函数，该函数可以根据您的示例准确创建表
这是我的脚本/函数：
OLD 函数的数据错误但输出正确.-.
const filterData = function (data) {
const filtered = {};
data.forEach(element => { // going through all the elements
if (filtered[element.callRoot]) filtered[element.callRoot].push(element); // if callRoot already exists in filtered object
else filtered[element.callRoot] = [element]; // else create property with callRoot as name -> here we push all the objects with the same callRoot name
})
return filtered;
};
const foo = function (data, element) {
const filtered = filterData(data);
// starting to create Table
// creating static table element, here becomes the element argument useful
const table = document.createElement('table');
element.appendChild(table);
// now we start creating the tbodies, trs and tds with the filtered data
// so we go through our filtered object by looping through an array of the keys ('@S','@C','@W')
Object.keys(filtered).forEach(property => {
// for each property we will create the tbody and tr + th and append them
const tbody = document.createElement('tbody');
table.appendChild(tbody);
let tr = document.createElement('tr');
tbody.appendChild(tr);
const th = document.createElement('th');
th.setAttribute('colspan', 9); // adding colspan attribute
th.textContent = filtered[property][0].userDescription; // taking the description as th text
tr.appendChild(th);
// now we create the rest of the tbody
// since i dont know where the data for the table comes from i will use the defined data from your example html output
// creating tr for our header tds
tr = document.createElement('tr');
tbody.appendChild(tr);
const definedDataArrayHeaders = ['Month', 'Last', 'Change', 'High', 'Low']; // headers from your example
definedDataArrayHeaders.forEach(element => { // going through the headers
const td = document.createElement('td');
td.textContent = element; // writing the header inside the td
tr.appendChild(td);
});
const definedDataArrayTds = ['August 2022', "1265'2", "-2'4", "1275'2", "1261'4"]; // tds from your example
for (let i of filtered[property]) { // will loop through each object inside our filtered array -> each tr in our future table
const tr = document.createElement('tr'); // creating tr for each data
tbody.appendChild(tr);
definedDataArrayTds.forEach(element => { // looping through the td data
const td = document.createElement('td');
td.textContent = element; // writing the data inside the td
tr.appendChild(td);
})
}
})
}
foo(commodities, document.querySelector('div')); // calling the function with data and Element where the table should be appended to
FALSE OLD 使用数据：
const commodities = [
{
actualSymbol: "@SF22",
callRoot: "@S",
open: 1.00,
close: 2.00,
userDescription: "SOYBEANS",
// Other data
},
{
actualSymbol: "@SH22",
callRoot: "@S",
open: 4.00,
close: 6.00,
userDescription: "SOYBEANS",
// Other data
},
{
actualSymbol: "@SK22",
callRoot: "@S",
open: 0.50,
close: 2.30,
userDescription: "SOYBEANS",
// Other data
},
{
actualSymbol: "@CH22",
callRoot: "@C",
open: 0.25,
close: 0.75,
userDescription: "CORN",
// Other data
},
{
actualSymbol: "@CK22",
callRoot: "@C",
open: 5.00,
close: 6.75,
userDescription: "CORN",
// Other data
},
{
actualSymbol: "@CN22",
callRoot: "@C",
open: 1.00,
close: 2.00,
userDescription: "CORN",
// Other data
},
{
actualSymbol: "@WH22",
callRoot: "@W",
open: 3.25,
close: 2.00,
userDescription: "WHEAT",
// Other data
},
{
actualSymbol: "@WK22",
callRoot: "@W",
open: 1.00,
close: 2.00,
userDescription: "WHEAT",
// Other data
},
{
actualSymbol: "@WN22",
callRoot: "@W",
open: 0.10,
close: 0.20,
userDescription: "WHEAT",
// Other data
}
];
但是对于正确的示例输出，这是 html 输出：
<div>
<table>
<tbody>
<tr>
<th colspan="9">SOYBEANS</th>
</tr>
<tr>
<td>Month</td>
<td>Last</td>
<td>Change</td>
<td>High</td>
<td>Low</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="9">CORN</th>
</tr>
<tr>
<td>Month</td>
<td>Last</td>
<td>Change</td>
<td>High</td>
<td>Low</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="9">WHEAT</th>
</tr>
<tr>
<td>Month</td>
<td>Last</td>
<td>Change</td>
<td>High</td>
<td>Low</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
<tr>
<td>August 2022</td>
<td>1265'2</td>
<td>-2'4</td>
<td>1275'2</td>
<td>1261'4</td>
</tr>
</tbody>
</table>
</div>
新的解决方案，希望这个能正常工作哈哈
这里是新版本的脚本，它肯定不好，所以请以它为指导，提出自己的解决方案
const filterData2 = function (data) {
const filtered = {};
const wantedData = ['month', 'change', 'last', 'high', 'low', 'settlePrice'];
data.forEach(element => { // going through all the elements
// now using userDescript as key since its a bit more precise
if (filtered[element.userDescription]) { // if userDescription already exists in filtered object
const piece = [];
// now we extract only the data we need for our html table:
Object.entries(element).forEach(array => {
if (wantedData.includes(array[0])) array[1]?.number ? piece.push([array[0], array[1].number]) : piece.push([array[0], array[1]]);
});
filtered[element.userDescription].push(piece);
}
else {// else create property with userDescription as name -> here we push all the objects with the same callRoot name
const piece = [];
filtered[element.userDescription] = [];
Object.entries(element).forEach(array => {
if (wantedData.includes(array[0])) array[1]?.number ? piece.push([array[0], array[1].number]) : piece.push([array[0], array[1]]);
});
filtered[element.userDescription].push(piece);
}
})
return filtered;
};
// needed since i structured my filtered data different
const getValue = (arr, string) => arr.find(pair => pair[0] === string);
const foo2 = function (data, element) {
const filtered = filterData2(data);
// starting to create Table
// creating static table element, here becomes the element argument useful
const table = document.createElement('table');
element.appendChild(table);
// now we start creating the tbodies, trs and tds with the filtered data
// so we go through our filtered object by looping through an array of the keys in example:('SOYBEANS','CORN','WHEAT')
Object.keys(filtered).forEach(key => {
// key will be either 'SOYBEANS', 'CORN', 'WHEAT' - in this example in exactly this order
// for each key we will create the tbody and tr + th and append them
const tbody = document.createElement('tbody');
table.appendChild(tbody);
let tr = document.createElement('tr'); // using let here since we are going to overwrite this variable later so we dont have to create a new one
tbody.appendChild(tr);
const th = document.createElement('th');
th.setAttribute('colspan', 9); // adding colspan attribute
th.textContent = key; // taking the key as a header
tr.appendChild(th);
// now we create the rest of the tbody
// now since we filtered the data so in our filtered variable are only the necessary values for our table except the Settle Date
// creating tr for our header tds
tr = document.createElement('tr');
tbody.appendChild(tr);
const definedDataArrayHeaders = ['MONTH', 'LAST', 'CHANGE', 'HIGH', 'LOW', 'SETTLE DATE', 'SETTLE PRICE', 'MORE']; // Headers for the Table, can be anything - keep in Mind the date must be coming from somewhere for these headers, just some are covered by the filtered Array
definedDataArrayHeaders.forEach(header => { // going through the headers
const td = document.createElement('td');
td.textContent = header; // writing the header inside the td
tr.appendChild(td); // tr we created outside, so they all come into the same row
});
const definedDataArrayTds = ['month', "last", "change", "high", "low", "missing", "settlePrice", "missing"]; // this array must contain the names of the values inside the filtered array and must be in the same order as "definedDataArrayHeaders" so the data is in the right column
// since the Settle date and more value arent in the data/filtered array i will take placeholders so the table still renders right
// this part is needed to be changed a lot, since the data is now structured completely different
for (let i of filtered[key]) { // will loop through each object inside our filtered array -> each tr in our future table
const tr = document.createElement('tr'); // creating tr for each data
tbody.appendChild(tr);
definedDataArrayTds.forEach(element => { // looping through the td data
const td = document.createElement('td');
td.textContent = getValue(i, element)?.[1] || 'PLACEHOLDER'; // writing the data inside the td
tr.appendChild(td);
})
}
})
}
foo2(data, document.querySelector('div'));
这个新示例中使用的数据：
const data = [
{
"symbol": {
"description": "SOYBEANS January 2022"
},
"actualSymbol": "@SF22",
"high": {
"number": 1396
},
"low": {
"number": 1374.75
},
"close": null,
"settlePrice": {
"number": 1401.5
},
"last": {
"number": 1378
},
"change": {
"number": -23.5
},
"month": "Jan 22",
"callRoot": "@S",
"userDescription": "SOYBEANS",
},
{
"symbol": {
"description": "SOYBEANS March 2022"
},
"actualSymbol": "@SH22",
"high": {
"number": 1409.75
},
"low": {
"number": 1379
},
"close": null,
"settlePrice": {
"number": 1410.25
},
"last": {
"number": 1383.25
},
"change": {
"number": -27
},
"month": "Mar 22",
"callRoot": "@S",
"userDescription": "SOYBEANS",
},
{
"symbol": {
"description": "SOYBEANS May 2022",
},
"actualSymbol": "@SK22",
"high": {
"number": 1418
},
"low": {
"number": 1387.5
},
"close": null,
"settlePrice": {
"number": 1418.75
},
"last": {
"number": 1391.25
},
"change": {
"number": -27.5
},
"month": "May 22",
"callRoot": "@S",
"userDescription": "SOYBEANS",
},
{
"symbol": {
"description": "CORN March 2022",
},
"actualSymbol": "@CH22",
"high": {
"number": 608
},
"low": {
"number": 596.75
},
"close": null,
"settlePrice": {
"number": 606.75
},
"last": {
"number": 599.25
},
"change": {
"number": -7.5
},
"month": "Mar 22",
"callRoot": "@C",
"userDescription": "CORN",
},
{
"symbol": {
"description": "CORN May 2022",
},
"actualSymbol": "@CK22",
"high": {
"number": 608.5
},
"low": {
"number": 598.25
},
"close": null,
"settlePrice": {
"number": 607.75
},
"last": {
"number": 600.75
},
"change": {
"number": -7
},
"month": "May 22",
"callRoot": "@C",
"userDescription": "CORN",
},
{
"symbol": {
"description": "CORN July 2022",
},
"actualSymbol": "@CN22",
"high": {
"number": 605.25
},
"low": {
"number": 595.5
},
"close": null,
"settlePrice": {
"number": 604.5
},
"last": {
"number": 598
},
"change": {
"number": -6.5
},
"month": "Jul 22",
"callRoot": "@C",
"userDescription": "CORN",
},
{
"symbol": {
"description": "WHEAT March 2022",
},
"actualSymbol": "@WH22",
"high": {
"number": 767.5
},
"low": {
"number": 748
},
"close": null,
"settlePrice": {
"number": 758.5
},
"last": {
"number": 763.75
},
"change": {
"number": 5.25
},
"month": "Mar 22",
"callRoot": "@W",
"userDescription": "WHEAT",
},
{
"symbol": {
"description": "WHEAT May 2022",
},
"actualSymbol": "@WK22",
"high": {
"number": 768.5
},
"low": {
"number": 750
},
"close": null,
"settlePrice": {
"number": 760.5
},
"last": {
"number": 765.5
},
"change": {
"number": 5
},
"month": "May 22",
"callRoot": "@W",
"userDescription": "WHEAT",
},
{
"symbol": {
"description": "WHEAT July 2022",
},
"actualSymbol": "@WN22",
"high": {
"number": 763.25
},
"low": {
"number": 747.25
},
"close": null,
"settlePrice": {
"number": 757
},
"last": {
"number": 760.5
},
"change": {
"number": 3.5
},
"month": "Jul 22",
"callRoot": "@W",
"userDescription": "WHEAT",
}
];
以上数据示例的输出
<div>
<table>
<tbody>
<tr>
<th colspan="9">SOYBEANS</th>
</tr>
<tr>
<td>MONTH</td>
<td>LAST</td>
<td>CHANGE</td>
<td>HIGH</td>
<td>LOW</td>
<td>SETTLE DATE</td>
<td>SETTLE PRICE</td>
<td>MORE</td>
</tr>
<tr>
<td>Jan 22</td>
<td>1378</td>
<td>-23.5</td>
<td>1396</td>
<td>1374.75</td>
<td>PLACEHOLDER</td>
<td>1401.5</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>Mar 22</td>
<td>1383.25</td>
<td>-27</td>
<td>1409.75</td>
<td>1379</td>
<td>PLACEHOLDER</td>
<td>1410.25</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>May 22</td>
<td>1391.25</td>
<td>-27.5</td>
<td>1418</td>
<td>1387.5</td>
<td>PLACEHOLDER</td>
<td>1418.75</td>
<td>PLACEHOLDER</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="9">CORN</th>
</tr>
<tr>
<td>MONTH</td>
<td>LAST</td>
<td>CHANGE</td>
<td>HIGH</td>
<td>LOW</td>
<td>SETTLE DATE</td>
<td>SETTLE PRICE</td>
<td>MORE</td>
</tr>
<tr>
<td>Mar 22</td>
<td>599.25</td>
<td>-7.5</td>
<td>608</td>
<td>596.75</td>
<td>PLACEHOLDER</td>
<td>606.75</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>May 22</td>
<td>600.75</td>
<td>-7</td>
<td>608.5</td>
<td>598.25</td>
<td>PLACEHOLDER</td>
<td>607.75</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>Jul 22</td>
<td>598</td>
<td>-6.5</td>
<td>605.25</td>
<td>595.5</td>
<td>PLACEHOLDER</td>
<td>604.5</td>
<td>PLACEHOLDER</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="9">WHEAT</th>
</tr>
<tr>
<td>MONTH</td>
<td>LAST</td>
<td>CHANGE</td>
<td>HIGH</td>
<td>LOW</td>
<td>SETTLE DATE</td>
<td>SETTLE PRICE</td>
<td>MORE</td>
</tr>
<tr>
<td>Mar 22</td>
<td>763.75</td>
<td>5.25</td>
<td>767.5</td>
<td>748</td>
<td>PLACEHOLDER</td>
<td>758.5</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>May 22</td>
<td>765.5</td>
<td>5</td>
<td>768.5</td>
<td>750</td>
<td>PLACEHOLDER</td>
<td>760.5</td>
<td>PLACEHOLDER</td>
</tr>
<tr>
<td>Jul 22</td>
<td>760.5</td>
<td>3.5</td>
<td>763.25</td>
<td>747.25</td>
<td>PLACEHOLDER</td>
<td>757</td>
<td>PLACEHOLDER</td>
</tr>
</tbody>
</table>
</div>