使用getJSON显示div内的所有对象

时间:2018-07-09 08:28:24

标签: javascript ajax append getjson

我试图将this Path of Exile API中的所有对象附加到Div内,但继续获取entries:数组的[object object]。

通过console.log(index, value)检查控制台时,我可以看到想要的所有内容。

我的代码中还缺少什么来显示"entries: "中的所有[object object]数组及其数据?

谢谢。

<!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){
                    $.each(result, function(index, value) {
                        console.log(index, value);
                        $("div").append(index + ": " + value + "<br/>");
                    });
                });
            });
        });

    </script>
</head>
<body>

    <button>Klick mich!</button>

    <div></div>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

如果您替换:

$("div").append(index + ": " + value + "<br/>");

具有:

$("div").append(index + ": " + JSON.stringify(value) + "<br/>");

应该显示您想要的所有内容。如此庞大的数据集可能很难阅读,但仍然可以使用。

答案 1 :(得分:1)

这里的问题是,当JavaScript需要字符串时,您正在传递对象,因此它使用Object的toString方法将Object转换为字符串。 toString方法始终返回[object Object],这就是为什么您会收到该错误的原因。

$("div").append(index + ": " + value + "<br/>");行之前,添加检查以验证value是否为对象,如果是,则使用JSON.stringify将其转换为字符串。

您可以使用以下代码

<!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) {
          $.each(result, function (index, value) {
            if (value instanceof Object) {
              value = JSON.stringify(value);
            }
            console.log(index, value);
            $("div").append(index + ": " + value + "<br/>");
          });
        });
      });
    });

  </script>
</head>

<body>

  <button>Klick mich!</button>

  <div></div>

</body>

</html>