时间戳

首页 > 解决方案 > 试图读取一些 json 数据并将其放入动态表中

javascript - 试图读取一些 json 数据并将其放入动态表中

问题描述

fetch('./testsplitfile.json').then(response => {
    return response.json();
}).then(data => {
    // Work with JSON data here
    //const GameInfo = console.log(Run.GameName._Text);
    console.log(data);
    //var obj = JSON.parse(data);
    var obj = data;

    function printValues(obj) {
        for (var k in obj) {
            if (obj[k] instanceof Object) {
                printValues(obj[k]);
            } else {
                document.write(obj[k] + "<br>");
            };
        }
    };
    //printValues(obj);
    //const GameNam = obj["Run"]["GameName"]["_text"]; // Prints:  something
    document.getElementById("NumOfSplits").innerHTML = `Amount of Splits total: ${obj["Run"]["Segments"]["Segment"]["length"]}`;
    var NOfSplits = obj["Run"]["Segments"]["Segment"]["length"]
        //document.getElementById("GameName").innerHTML = obj["Run"]["GameName"]["_text"];
        //document.getElementById("CategoryName").innerHTML = obj["Run"]["CategoryName"]["_text"];
        //document.getElementById("SplitN0").innerHTML = obj["Run"]["Segments"]["Segment"]["0"]["Name"]["_text"];
        //document.getElementById("SplitT0").innerHTML = obj["Run"]["Segments"]["Segment"]["0"]["SplitTimes"]["SplitTime"]["RealTime"]["_text"]; // really stupid json thing that is annoying yet works really well
        //document.getElementById("SplitN1").innerHTML = obj["Run"]["Segments"]["Segment"]["1"]["Name"]["_text"];
        //document.getElementById("SplitT1").innerHTML = obj["Run"]["Segments"]["Segment"]["1"]["SplitTimes"]["SplitTime"]["RealTime"]["_text"];

    function Segment(NOfSplits) {
        NOfSplits - 1
        let NumSlipts = NOfSplits - 1;

        if (NumSlipts != 0) {
            console.log(NumSlipts)

            document.getElementById(`SplitN${NumSlipts}`).innerHTML = obj["Run"]["Segments"]["Segment"][NumSlipts]["Name"]["_text"];
            document.getElementById(`SplitT${NumSlipts}`).innerHTML = obj["Run"]["Segments"]["Segment"][NumSlipts]["SplitTimes"]["SplitTime"]["RealTime"]["_text"];
        }
        return NumSlipts;
    };
    Segment(NOfSplits);

Havent 添加了动态表，但我无法将数据放入 14 行长的表中。现在只有最后一个在做任何事情。我正在尝试使用递归循环并失败。我将livesplit xml拆分文件转换为json，因为我正在处理需要读取这些文件的事情

<!DOCTYPE HTML>
<HTML>

<HEAD>
    <link rel="stylesheet" href="layout.css">
</HEAD>

<BODY>

    <h1 id=GameName></h1>
    <h1 id=CategoryName></h1>
    <script src=main.js></script>
    <p id=NumOfSplits></p>
    <table>
        <tr>
            <th>SPLIT</th>
            <th>TIME</th>
        </tr>
        <tr>
            <td id=SplitN0>N0</td>
            <td id=SplitT0>T0</td>
        </tr>
        <tr>
            <td id=SplitN1>N1</td>
            <td id=SplitT1>T1</td>
        </tr>
        <tr>
            <td id=SplitN2>N2</td>
            <td id=SplitT2>T2</td>
        </tr>
        <tr>
            <td id=SplitN3>N3</td>
            <td id=SplitT3>T3</td>
        </tr>
        <tr>
            <td id=SplitN4>N4</td>
            <td id=SplitT4>T4</td>
        </tr>
        <tr>
            <td id=SplitN5>N5</td>
            <td id=SplitT5>T5</td>
        </tr>
        <tr>
            <td id=SplitN6>N6</td>
            <td id=SplitT6>T6</td>
        </tr>
        <tr>
            <td id=SplitN7>N7</td>
            <td id=SplitT7>T7</td>
        </tr>
        <tr>
            <td id=SplitN8>N8</td>
            <td id=SplitT8>T8</td>
        </tr>
        <tr>
            <td id=SplitN9>N9</td>
            <td id=SplitT9>T9</td>
        </tr>
        <tr>
            <td id=SplitN10>N10</td>
            <td id=SplitT10>T10</td>
        </tr>
        <tr>
            <td id=SplitN11>N11</td>
            <td id=SplitT11>T11</td>
        </tr>
        <tr>
            <td id=SplitN12>N12</td>
            <td id=SplitT12>T12</td>
        </tr>
        <tr>
            <td id=SplitN13>N13</td>
            <td id=SplitT13>T13</td>
        </tr>

    </table>
</BODY>

</HTML>

标签： javascriptjsonrecursion

解决方案

推荐阅读