[英]How to append objects from JSON to a div in HTML?
我一直在嘗試從Github用戶配置文件中獲取JSON並在虛擬數據庫中發布然后將“image”,“用戶名”和“真實姓名”以及由jQuery創建的div顯示為html中的div。
但我堅持將我的對象從JSON追加到div。 我知道格式錯了,但我不知道格式是否合適,有人可以幫助我嗎? 謝謝!
這是Javascript和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>
首先,您在$.ajax
回調中定義的參數是data
,而不是datas
,您嘗試訪問的屬性位於響應的form
對象中,因此您需要使用data.form
來訪問它們。
最后,最重要的是,您需要將創建的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>' + 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>
請注意,響應中name
屬性為空,因此它不會出現在生成的HTML中。
不要將HTML標記放在JavaScript代碼中。 將所有HTML代碼放在容器中
<div class="container">
<div id="login"></div>
<div id="id"></div>
<div id="avatar_url"></div>
...
</div>
現在填充ajax成功函數中的數據。
$(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);
// ...
}
});
});
});
您無法以字符串模式訪問對象數據。 您需要結束字符串以附加對象中的內容,如下所示:
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);
試試這個
$(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['avatar_url']+data.login+data.name +"</div>");
}
});
});
});
$(document).ready(function() {
var datas = $.get("https://api.github.com/users/iwenyou",
function(datas) {
$.ajax({
type: "POST",
url: "https://httpbin.org/post",
data: datas,
dataType: "json",
success: function(data) {
$(".container").append("<div>"+data.form.avatar_url+"</br>"+data.form.login+"</br>"+data.form.name+"</br>"+"</div>");
}
});
});
});
你可以試試這個: -
$(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) {
if (data.hasOwnProperty('form')) {
datas = data.form;
$(".container").append("<div>Avatar URL : " + datas.avatar_url + "<br>Lodin : " + datas.login + "<br>Name : " + datas.name + "</div>");
}
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.