将 JSON 对象拆分为多个 <td>

Question

我目前正在尝试创建一个类似于 this one.

的角色排名系统

使用官方 API 我可以通过 $.getJSON 和 URL 将所有数据附加到 table.

到目前为止，我显示了 20 个字符，并在多个 table 行中获取了所有字符数据（每个字符一个），但还没有弄清楚如何将字符对象拆分为多个<td>，这样我就可以更好地控制通过 CSS 来解决它们。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $.getJSON("http://api.pathofexile.com/ladders/Standard?callback=?", function (result) {

                    $("#tdPlayer").append("<td>" + result["total"] + "</td>" + "<br/>");

                    $("#tdSince").append("<td>" + result["cached_since"] + "</td>" + "<br/>");

                    $.each(result["entries"], function (index, value) {
                        $("#tdRanking").append("<tr>" + "<td>" + JSON.stringify(index, null, '\t') + ": " + JSON.stringify(value, null, '\t') + "</td>" + "</tr>" + "<br/>");

                    });
                });
            });
        });

    </script>
</head>

<body>

    <button>Anzeige der Top 20 Spieler in der Incursion Liga</button>

    <div>
        <table>
            <tr>
                <td id="tdPlayer">Anzahl der Spieler:</td>
                <td id="tdSince">Suchbeginn: </td>
            </tr>
            <tr>
                <td colspan="2" id="tdRanking">Spieler: (max. 20 angezeigt)</td>
            </tr>
        </table>
    </div>

</body>

</html>

我从 can be found here.

追加数据的整个 JSON 对象

Answer 1

您可以使用非字符串化 value 变量访问 $.each 函数中的字符属性。例如，要访问角色名称，请使用 value.character.name

$("#tdRanking").append("<tr><td>" + JSON.stringify(index, null, '\t') + '<td>' + value.character.name + "</td></tr>");

我在 codepen

上添加了一个示例

请注意，我没有使用 ajax 检索数据，因为您的数据源未通过 https://

提供服务

将 JSON 对象拆分为多个 <td>

Split up JSON Object into multiple <td>

javascript

jquery

html-table

append

getjson