KING_JOKER6 2022-04-07 22:15 采纳率: 75%
浏览 50
已结题

从数据库调用数据到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里点击按钮后，可以显示

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-04-07 23:05
    关注

    没必要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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 4月15日
  • 已采纳回答 4月7日
  • 创建了问题 4月7日

悬赏问题

  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 AT89C51控制8位八段数码管显示时钟。
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题