时间戳

首页 > 解决方案 > 如何引用从api返回的json中的字段？

javascript - 如何引用从api返回的json中的字段？

问题描述

我需要通过api下载两个值，在网页的header中使用。

api调用有效并返回一个json，格式有效。

我试过 var tvotes = jsonstr.totvotes;

和 var tvotes = jsonstr ["totvotes"]; 但得到未定义的错误

我究竟做错了什么？- 如何引用 jsonstr 中的字段？

提前致谢

迈克尔

这是我的代码：

    <!DOCTYPE html>
<html lang="en">
  <head>
  <script>
      var request = new XMLHttpRequest();
        request.open('GET', 'https://au2mailer.com/api/a2m-getreviews.asp?apikey={{API_KEY}}');
        request.send();
        request.onload = ()=>{
        var jsonstr = request.response;
        document.write(jsonstr);
        document.write(jsonstr.totvotes);
        }
  </script>
</head>

<body>

</body>

</html>

标签： javascriptjson

解决方案

首先，您在这里请求的 api 很奇怪。它不会将 json 作为纯字符串返回，而是返回包含 json 字符串的 html 文本。

了解之后，就可以使用DOMParser轻松读取其中的 html 文本并提取正文内容。然后你得到了 json 字符串。之后，您仍然需要将 json 字符串解析为实际对象，否则您将尝试获取字符串的属性。要解析字符串，您可以使用JSON.parse。

我更新了你的问题以适应这个： 

<!DOCTYPE html>
<html lang="en">
  <head>
  <script>
      var request = new XMLHttpRequest();
        request.open('GET', 'https://au2mailer.com/api/a2m-getreviews.asp?apikey={{apikey}}');
        request.send();
        request.onload = ()=>{
          var receivedDom = new DOMParser().parseFromString(request.response, "text/html");
          var jsonstr = receivedDom.body.innerText;
          var parsedstr = JSON.parse(jsonstr);
          document.write(parsedstr.totvotes);
        }
  </script>
</head>

<body>

</body>

</html>

我还看到您正在使用 XMLHttpRequest。它仍然有效，但实际上并不那么方便。我会使用现代方式来使用Fetch API。

一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
  <script>
    const url = "https://au2mailer.com/api/a2m-getreviews.asp?apikey={{apikey}}";
    fetch(url)
      .then(response => response.text())
      .then(text => {
        let receivedDom = new DOMParser().parseFromString(text, "text/html");
        let jsonStr = receivedDom.body.innerText;
        document.write(jsonStr);
        let parsedObj = JSON.parse(jsonStr);
        document.write(parsedObj.totvotes)
      });
  </script>
</head>

<body>

</body>

</html>

推荐阅读