How to append objects from JSON to a div in HTML?

Question

I've been trying to get JSON from a Github user profile and post in dummy database then display the "image", "user name" and "real name" together with a div created by jQuery into a div in html.

But I'm stuck at appending my objects from JSON to the div. I know I got the format wrong but I don't know the right format, can someone help me with that? Thank you!

Here is the Javascript and HTML:

$(document).ready(function() {
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) {
    $.ajax({
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) {
        $(".container").append("<div>datas['avatar_url']+datas.login+datas.name</div>");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Solution 1

Firstly the parameter you define in the $.ajax callback is data, not datas and the properties you're trying to access are in the form object of the response, so you need to use data.form to access them.

Lastly, and most importantly, you need to concatenate the HTML string you create together with the values from the retrieved object. Try this:

$(document).ready(function() {
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) {
    $.ajax({
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) {
        $(".container").append('<div>' + data.form.avatar_url + '</div><div>' + data.form.login + '</div><div>' + data.form.name + '</div>');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Note that the name property is empty in the response, so it does not appear in the generated HTML.

Solution 2

Don't put HTML tags in JavaScript Code. Put all your HTML codes within container like

<div class="container">
    <div id="login"></div>
    <div id="id"></div>
    <div id="avatar_url"></div>
    ...
</div>

Now populate data from your ajax success function.

$(document).ready(function() {
var datas = $.get("https://api.github.com/users/iwenyou",
function(infos) {
    $.ajax({
        type: "POST",
        url: "https://httpbin.org/post",
        data: infos,
        dataType: "json",
        success: function(data) {
            $(".container").find("#login").text(data.login);
            $(".container").find("#id").text(data.id);
            $(".container").find("#avatar_url").text(data.avatar_url);
           // ...
        }
   });
});
});

Comments

[Rory McCrossan]

What about datas['avatar_url']? datas.login and datas.name also return undefined.