将 API 响应数据保存为 HTML 元素答案

【问题标题】：Saving API response data as an HTML element将 API 响应数据保存为 HTML 元素
【发布时间】：2018-01-04 21:41:47
【问题描述】：

我有一个 html 文件，里面有一些 JavaScript。我还有一个 URL，当打开它时，它只是一个页面，其中包含来自 AWS lambda API 调用的数据，我从使用 AWS API Gateway 制作 lambda API 时收到这些数据。该页面在加载数据时看起来像一个完全空白的页面，其布局类似于，

[
{"user": "bob", "groups": ["bobsGroup"], "policies": ["bobsPolicy", "anotherPolicy"["Policy3"]]},
{"user": "sal", "groups": ["salsGroup"], "policies": ["salssPolicy", "anotherPolicy"["Policy3"]]}
]

我的问题是我想从 API 响应中获取数据并将其保存到 HTML 段落元素中。我认为我目前没有使用正确的逻辑或以不正确的方式尝试在我的脚本标签中运行以下内容，

var myjson;
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){myjson = json;});
document.getElementById("demo").innerHTML = myjson

demo 只是我的 HTML 中的一个段落标签

完整的代码sn-p是，

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">


  </head>
  <body>


  <div id = "demo"></div>




    <script>

        var myjson;
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){ 
  document.getElementById("demo").innerHTML = json;
});


    </script>


  </body>
</html>

【问题讨论】：

标签： javascript html json aws-lambda aws-api-gateway

【解决方案1】：

在 ajax 成功回调中移动 document.getElementById("demo").innerHTML...

var myjson;
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){
  myjson = json; 
  document.getElementById("demo").innerHTML = myjson;
});

代码清理版本

$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){ 
  document.getElementById("demo").innerHTML = json;
});

【讨论】：

感谢您的帮助！我对使用 JavaScript 非常陌生，甚至不知道 AJAX 的用途。我现在正在考虑使用它以获得更好的理解。
不客气！如果有帮助，请接受此答案并投票。
澄清一下，你是说如果我只是将上面的“代码清理版本”中的代码粘贴到我的 HTML 的脚本标记中，它应该在使用数据打开时填充我的 HTML 页面来自 $.getJSON?
是的，它应该...在成功的 AJAX 响应后，将立即填充数据。
所以当我打开我的 HTML 页面“index.html”时，当我以为我会看到 API 响应数据时，我只是得到一个空白屏幕。你看到问题可能出在哪里了吗？我继续编辑我的帖子以包含更多细节。再次感谢