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

【问题标题】：Split up JSON Object into multiple <td>将 JSON 对象拆分为多个 <td>
【发布时间】：2018-12-18 02:53:27
【问题描述】：

我目前正在尝试创建一个类似于this one.的角色排名系统

使用官方 API，我可以通过 $.getJSON 和 URL 将所有数据附加到表格中。

到目前为止，我显示了 20 个字符并在多个表行中获取了所有字符数据（每个字符一个），但还没有弄清楚如何将字符对象拆分为多个 <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 对象。

【问题讨论】：

我们需要查看 JSON
我添加了一张带有对象的表格的屏幕截图。您可以看到我通过 api.pathofexile.com/ladders/Standard 附加的整个 JSON 对象

标签： javascript jquery html-table append getjson

【解决方案1】：

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

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

我在codepen 上添加了一个示例

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

【讨论】：

是否可以每次都自动加载“var result”对象，而不是手动将整个对象放在那里？所以我可以稍后使用过滤器选项，它可以显示的不仅仅是这个特定案例。
是的，您使用的方法就可以了。我使用了一个对象，因为您的特定 api 无法通过 https
啊，我明白了！这样可行。刚刚遇到的问题是我想在行内的每个人都有一个，例如$("#tdRanking").append("<tr>" + "<td>" + value.rank + "</td>" + "<td>" + value.character.name + "</td"> + "</tr>" + "<br/>"); 我可以在console.log(value.rank + value.character.name) 中看到结果，但是在尝试附加时它不起作用。
没关系 - 它有效。我在“