My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this:
[
{"user": "bob", "groups": ["bobsGroup"], "policies": ["bobsPolicy", "anotherPolicy"["Policy3"]]},
{"user": "sal", "groups": ["salsGroup"], "policies": ["salssPolicy", "anotherPolicy"["Policy3"]]}
]
I am looking to extract the data from the API response and store it within an HTML paragraph element. However, I suspect my approach is incorrect as I have been attempting to achieve this by embedding the following code snippet within my script tags:
var myjson;
$.getJSON("https://myapi.execute-api.us-east-2.amazonaws.com/myapi//myapiresource", function(json){
myjson = json;
});
document.getElementById("demo").innerHTML = myjson;
The identifier demo refers to a paragraph tag in my HTML document.
Here is the complete code snippet:
<!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>