Return resulting json from github API on html file

Question

I have this html code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>
<script>

  $(document).ready(function(){

  $.ajax({
        url: "https://api.github.com/users/Microsoft",
        type: 'GET',
        dataType: 'json',
        success: function(res) {
           $('#result').html(res)
        }
    });

})

</script>

Whenever I try to see the result on my browser it just shows an empty blank page.

I just need to return the API result and show it on html.

Any ideas?

Have you tried using network monitor available in devtools of your browser to inspect the server's response? Maybe use $('#result').text(JSON.stringify(res)) instead of your line. To analyse the issue, insert console.log( res ); right before that line injecting the result into HTML element just to make sure this callback is ever invoked. And see the console for probably showing warning regarding CORS issue. — Thomas Urban
– Thomas Urban, Commented Dec 16, 2018 at 18:45
Thank You! That was it, also, excuse me, just a question, do you know how can I format that response? I mean, just an idea, can I put every json item into a different div? — NeoVe
– NeoVe, Commented Dec 16, 2018 at 18:47
Formatting: don't use a <div>, but a <pre> might help with that, though it still might require to pretty-print the JSON as a string: $('#result').text(JSON.stringify(res, null, '\t'));. — Thomas Urban
– Thomas Urban, Commented Dec 16, 2018 at 18:48

Hydrothermal · Accepted Answer · 2018-12-16 18:48:24Z

3

The AJAX callback makes res an object. When you using .html() the argument must be a string. If you want to see the object represented on the page, use JSON.stringify():

$.ajax({
    url: "https://api.github.com/users/Microsoft",
    type: 'GET',
    dataType: 'json',
    success: function(res) {
       $('#result').html(JSON.stringify(res))
    }
});

answered Dec 16, 2018 at 18:48

Hydrothermal

5,1317 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Urban Over a year ago

I'd stick with .text() instead of .html() just to make sure any contained < isn't parsed as HTML ... it's performing better, too.

Collectives™ on Stack Overflow

Return resulting json from github API on html file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related