从数据库调用数据到html,加上split以分开数据后就无法显示

问题遇到的现象和发生背景

原本可以在html里显示数据。加上split分开以后，就无法显示

问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Final Assigment</title>
        <script type="text/javascript"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script defer src="final.js"></script>
        <link rel="stylesheet" href="final.css">
    </head>

      <body onload="view1()">
        <h2>Tier2 </h2>
        <button id="view1">Recent weather data</button>
        <div id="output"></div>
      </body>

      </html>


document.getElementById('view1').addEventListener('click', view1);

function view1() {
    fetch("http://webapi19sa-1.course.tamk.cloud/v1/weather")
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>Weather data</h2>';
        for(let i = 0; i < 30; i++) {

            const weatherData = data[i];

            let seperate=JSON.stringify(weatherData.date_time);
            const sepArray=seperate.split("\"")[1];
            let sep_date=sepArray.split("A");
            let sep_time=sep_date[1].split("S");

            output += `
        <table class="tableView1">
            <tr>
                <th>Row Number</th>
                <th>Measurement Date</th>
                <th>Measurement Time</th>
                <th>Measurement Type</th>
                <th>Measured value</th>
            </tr>
            <tr>
                <td>${i+1}</td>
                <td>${sep_date}</td>
                <td>${sep_time}</td>
                <td>${Object.keys(weatherData.data)}</td>
                <td>${Object.values(weatherData.data)}</td>
            </tr>
        </table>
        `;
        }
        document.getElementById('output').innerHTML = output;
    })
}
运行结果及报错内容

运行出来的结果是html只有按钮，但无法显示数据

我的解答思路和尝试过的方法

可能是命名问题，尝试过保留这一段，仍然可以读取

            let seperate=JSON.stringify(weatherData.date_time);

去掉


            let sep_date=sepArray.split("A");
            let sep_time=sep_date[1].split("S");

这一段后及有关变量后，可以显示，但需要以此代码分开其中一段数据

我想要达到的结果

在html里点击按钮后，可以显示

没必要JSON.stringify，date_time是字符串，而且未包含A内容，题主应该是想分割日期和时间吧。应该用T，用A的话split后只有一个项，获取第二个项sep_date就为undefined了，再调用split报错

img

改下面即可

img


document.getElementById('view1').addEventListener('click', view1);

function view1() {
    fetch("http://webapi19sa-1.course.tamk.cloud/v1/weather")
        .then((res) => res.json())
        .then((data) => {
            let output = '<h2>Weather data</h2>';
            for (let i = 0; i < 30; i++) {

                const weatherData = data[i];

                //let seperate = weatherData.date_time;//date_time是字符串，没必要stringify啊？？ 下面这句直接赋值就行了JSON.stringify(weatherData.date_time);
                //const sepArray = weatherData.date_time// seperate.split("\"")[1];
                //let sep_date = sepArray.split("T");
                //let sep_time = sep_date[1].split("S");

                let arr = weatherData.date_time.split('T')
                let sep_date = arr[0]
                let sep_time = arr[1]
                output += `
        <table class="tableView1">
            <tr>
                <th>Row Number</th>
                <th>Measurement Date</th>
                <th>Measurement Time</th>
                <th>Measurement Type</th>
                <th>Measured value</th>
            </tr>
            <tr>
                <td>${i + 1}</td>
                <td>${sep_date}</td>
                <td>${sep_time}</td>
                <td>${Object.keys(weatherData.data)}</td>
                <td>${Object.values(weatherData.data)}</td>
            </tr>
        </table>
        `;
            }
            document.getElementById('output').innerHTML = output;
        })
}

img

打印一下seperate这个变量，看控制台报什么错，请截图继续交流


document.getElementById('view1').addEventListener('click', view1);

function view1() {
    fetch("http://webapi19sa-1.course.tamk.cloud/v1/weather")
    .then((res) => res.json())
    .then((data) => {
        let output = '<h2>Weather data</h2>';
        for(let i = 0; i < 30; i++) {

            const weatherData = data[i];
            let seperate=JSON.stringify(weatherData.date_time);
            const sepArray=seperate.split("\"")[1];


            let key2 =Object.keys(weatherData.data);
            let variable2 =Object.values(weatherData.data);
            output += `
        <table class="tableView1">
            <tr>
                <th>Row Number</th>
                <th>Measurement Date</th>
                <th>Measurement Time</th>
                <th>Measurement Type</th>
                <th>Measured value</th>
            </tr>
            <tr>
                <td>${i+1}</td>
                <td>${seperate}</td>
                <td>${key2}</td>
                <td>${variable2}</td>
            </tr>
        </table>
        `;
        }
        document.getElementById('output').innerHTML = output;
    })
}

上面是码，下面是截图

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632