How to append objects from JSON to a div in HTML?
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.
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); // ... } });});});
You can't access the object data in string mode. You need to end the string to append content from your object like so:
console.clear();var datas = { "login": "iwenyou", "id": 20179472, "avatar_url": "https://avatars.githubusercontent.com/u/20179472?v=3", "gravatar_id": "", "url": "https://api.github.com/users/iwenyou", "html_url": "https://github.com/iwenyou", "followers_url": "https://api.github.com/users/iwenyou/followers", "following_url": "https://api.github.com/users/iwenyou/following{/other_user}", "gists_url": "https://api.github.com/users/iwenyou/gists{/gist_id}", "starred_url": "https://api.github.com/users/iwenyou/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/iwenyou/subscriptions", "organizations_url": "https://api.github.com/users/iwenyou/orgs", "repos_url": "https://api.github.com/users/iwenyou/repos", "events_url": "https://api.github.com/users/iwenyou/events{/privacy}", "received_events_url": "https://api.github.com/users/iwenyou/received_events", "type": "User", "site_admin": false, "name": null, "company": null, "blog": null, "location": "SF Bay Area", "email": null, "hireable": null, "bio": "A crawling programer...", "public_repos": 3, "public_gists": 0, "followers": 0, "following": 0, "created_at": "2016-06-28T04:45:54Z", "updated_at": "2016-07-10T03:47:33Z"}var output = "<div>" + datas['avatar_url'] + " | " + datas.login + "</div>";console.log(output);document.write(output);