这是HTML和JAVA SCRIPT的代码。我想在js中用多个DATA_SOURCE = '';但是不知道怎么添加。我如果添加进去的话，第一个数据的表格就不会显示。然后题的要求是需要建立三个按钮，然后每点一个按钮界面就会切换成只有那个表格的界面。主要的代码需要在JS中建立。下面是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body onload="getData()">
<h1>Final Assigment</h1>
<button type="button" onclick="getdata()">Weather</button>
<button type="button" onclick="getData1()">temperatures</button>
<div id="data1"></div>
<h2>Tier1:30 measurements</h2>
<div id="Weather"></div>
</body>
</html>
function dataToHtmlRepresentation(dataObjects){
let html='<table><tr><th>Row Number</th><th>Measurement Date</th><th>Measurement time</th><th>Measurement Type</th><th>Measured Value</th></tr>';
for (let i = 0; i < 30; i++) {
let seperate=JSON.stringify(dataObjects[i].date_time);
console.log(seperate);
const sepArray=seperate.split("\"")[1];
console.log(sepArray);
let sep_date=sepArray.split("T");
let sep_time=sep_date[1].split("Z");
let key2 =Object.keys(dataObjects[i].data);
let variable2 =Object.values(dataObjects[i].data);
html +=`
<tr>
<td>${i+1}</td>
<td>${sep_date[0]}</td>
<td>${sep_time[0]}</td>
<td>${key2}</td>
<td>${variable2}</td>
</tr>
`
}
html += '</table>';
return html;
}
const DATA_SOURCE = '';
function getData() {
fetch(DATA_SOURCE).then(response => {return response.json()})
.then(data => {
const e = document.getElementById("Weather");
console.log(e);
e.innerHTML = dataToHtmlRepresentation(data);
})
.catch(error => console.error('AAARRRGH! ' + error));
}
//Tier 2
function getData0() {
// Initializing the request
const xhr = new XMLHttpRequest();
xhr.open("GET", DATA_SOURCE);
xhr.onreadystatechange = function() {
if (this.readyState == XHR_DONE) {
if (this.status == XHR_SUCCESS) {
const e = document.getElementById("data0");
const data = JSON.parse(this.responseText);
// Constructing HTML content based on the data:
e.innerHTML = dataToHtmlRepresentation(data);
}
else {
console.log('Error! ' + xhr.status);
}
}
};
// Sending the request (finally)
xhr.send();
}