I'm using Axios to take information from an API. Axios connects and returns an object with the correct information, however I'm having difficulty taking that returned JSON and making it appear in my HTML code.
My code is:
<body>
<script type="text/javascript">
axios.get('http://localhost:3000/boxmac').then(function (response) {
console.log(response);
document.getElementById('lol').innerHTML = response.Object;
}).catch(function (error) {
console.log(error);
});
</script>
<p id="lol"></p>
</body>
At this point I'd be happy if it dumped the entire DB contents (all 168 rows and 1000+ items) into HTML. I'd at least know I got somewhere.
At this point I get a response from the console.log(response) (I think). it returns
Object {data: Object, status: 200, statusText: "OK", headers: Object, config: Object…}
My problem is finding what I need to use to make the contents of the object JSON to appear in the HTML
Ok I can get [object Object] returned in my HTML. now how do I get it to return information in the Object.
Going through the tree in console requires navigating:
Object => Object => macdb => [0 ... 99 ] => Object
Progress! using
document.getElementById('lol2').innerHTML = res.data.macdb;
I got a ton of [object Object] in the HTML, now I just need the content in that object.
If you said your expected returned type is JSON - just setting it to
innerHTMLnot enough. You need some template engine to generate content from this JSON. Like underscore templating.