javascript 如何在jquery中获取json数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7538171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 00:26:53 来源:igfitidea点击:
how to get json data in jquery
提问by doforumda
How can I get the comments from below json data?
如何从下面的 json 数据中获取评论？
{
"data":
[
{
"id":"123",
"from":{"name":"name","id":"12"},
"message":"Message",
"comments": {
"data":
[
{
"id":"342",
"from":{"name":"name","id":"32"},
"message":"comment message 1"
},
{
"id":"341",
"from":{"name":"name","id":"21"},
"message":"comment message 2"
}
],
"count":2
}
}
]
}
}
I know how to get id, from and message. but I do not know how can I get data inside comments.
我知道如何获取 id、from 和 message。但我不知道如何在评论中获取数据。
here is my jquery code
这是我的 jquery 代码
$.getJSON(newsfeed_url,function(d) {
$.each(d.data, function(i,res) {
html += "<div class='container'>";
html += "<li>"+ res.from.name +"</li>";
html += "<li class='message'>" + res.message + "</li>";
html += "<li>Comments: " + res.comments.count + "</li>";
$.each(res.commments.data, function(i, comment) {
html += "<li class=''>" + comment.message + "</li>";
});
html += "</div>";
});
html += "</ul>";
$("#contents").html(html);
});
my current code does get res.from.name, res.comments.count but it does not get data inside comments i.e. res.comments.data.
我当前的代码确实得到 res.from.name, res.comments.count 但它没有得到评论内的数据，即 res.comments.data。
how can I achieve it?
我怎样才能实现它？
here is my actual json file. The above one I gave was example. here it goes
这是我的实际 json 文件。我上面给出的就是一个例子。在这里
{
"data":
[
{
"id":"7234234234_32423432",
"from":{"name":"name","id":"34534534534"},
"message":"N?yttelyn puoliv?li/kolmas viikko.\n\nhttp://alastonkriitikko.blogspot.com/2011/09/nayttelykuvia-458-459-kadulla-ja.html",
"picture":"http://external.ak.fbcdn.net/safe_image.php?d=AQAWGCUrr4QBEFXk&w=90&h=90&url=http%3A%2F%2F1.bp.blogspot.com%2F-pBAudI2423s%2FTm7y-ajz62I%2FAAAAAAAAE6g%2F-K4s1sfrYpI%2Fs72-c%2FIMG_1737.JPG",
"link":"http://alastonkriitikko.blogspot.com/2011/09/nayttelykuvia-458-459-kadulla-ja.html",
"name":"name: N?yttelykuvia 458 & 459: Kadulla ja studiossa",
"caption":"alastonkriitikko.blogspot.com",
"description":"N?yttelykuvia ja kritiikkej? sek? metakritiikki?, p?iv?kirjamerkint?j? ja satunnaisia hajahuomioita taiteesta – sek? n?hdyst? ett? luetusta",
"icon":"http://static.ak.fbcdn.net/rsrc.php/v1/yD/r/aS8ecmYRys0.gif",
"actions":
[
{"name":"Comment","link":"http://www.facebook.com/23432354/posts/324534543546565"},
{"name":"Like","link":"http://www.facebook.com/759688182/posts/274846375878348"}
],
"type":"link",
"created_time":"2011-09-13T09:47:23+0000",
"updated_time":"2011-09-13T09:58:30+0000",
"comments":
{
"data":
[
{
"id":"3242342343_345878348_4012650",
"from":{"name":"name","id":"4534544"},
"message":"hitto. pit?? ehti? n?kem??n. Niin pitk? on matka kantsusta keskustaan...",
"created_time":"2011-09-13T09:51:29+0000"
},
{
"id":"32453543534_34534534348_4012674",
"from":{"name":"name","id":"54654654645"},
"message":"Ainakin verraten t?h?n matkaan S?rk?st? keskustampaan, joka usein v?itt?? itse??n minulle liian pitk?ksi.",
"created_time":"2011-09-13T09:58:30+0000"
}
],
"count":2
}
}
]
}
It is still not working. BTW I am not taking data from facebook or somewhere else. I have local .json file and from there I get data. The object which it says is undefined is "res.comments.data".
它仍然无法正常工作。顺便说一句，我不是从 Facebook 或其他地方获取数据。我有本地 .json 文件，并从那里获取数据。它说未定义的对象是“res.comments.data”。
here is my whole code
这是我的全部代码
$(function() {
var newsfeed_url = "json_data/newsfeed.json";
var html = "<ul>";
$.getJSON(newsfeed_url,function(d) {
$.each(d.data, function(i,res) {
var userid = res.from.id;
var username = res.from.name;
var msg = res.message;
var date_time = res.created_time;
//var like = res.created_time;
var url = "https://graph.facebook.com/" + userid + "/picture";
var pUrl = "http://www.facebook.com/profile.php?id=" + userid;
html += "<div class='container'>";
html += "<li class='profile_image'><img src='" + url + "' /></li>";
html += "<li class='from_name'><a href='" + pUrl + "'>" + username + "</a></li>";
html += "<li class='message'>" + msg + "</li>";
html += "<li class='time_ago'>" + relative_time(date_time) + "</li>";
$.each(res.actions, function(i, action) {
html += "<li class=''><a href='" + action.link + "'>" + action.name + "</a></li>";
//html += "<li class=''>Link: " + action.link + "</li>";
});
html += "<li>Comments: " + res.comments.count + "</li>";
//html += "<li>Likes: " + res.likes.count + "</li>";
//html += "<li>Comments: " + res.comments.data + "</li>";
alert(res.comments.data);
$.each(res.comments.data, function(j, comment) {
//alert(comment.message);
html += "<li class=''>" + comment.message + "</li>";
});
//alert(res.comments.data);
html += "<li class='no_float'></li>";
html += "</div>";
//newsfeed(userid, username, msg, date_time, like);
});
html += "</ul>";
$("#contents").html(html);
});
//display message short.
function short_msg(msg, un) {
var limit = 80;
if(un)
return msg.length > 30 ? msg.substring(0, 30) : msg;
else
return msg.length > limit ? msg.substring(0, limit) + "..." : msg;
}
//function which displays date and time in readable format
function relative_time(date_str) {
if (!date_str) {return;}
var s = $.trim(date_str);
s = s.replace(/\.\d\d\d+/,""); // remove milliseconds
s = s.replace(/-/,"/").replace(/-/,"/");
s = s.replace(/T/," ").replace(/Z/," UTC");
s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," "); // -04:00 -> -0400
var parsed_date = new Date(s);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); //defines relative to what ..default is now
var delta = parseInt((relative_to.getTime()-parsed_date)/1000);
delta=(delta<2)?2:delta;
var r = "";
if (delta < 60) r = delta + " seconds ago";
else if(delta < 120) r = " a minute ago";
else if(delta < (45*60)) r = (parseInt(delta / 60, 10)).toString() + " minutes ago";
else if(delta < (2*60*60)) r = " an hour ago";
else if(delta < (24*60*60)) r = "" + (parseInt(delta / 3600, 10)).toString() + " hours ago";
else if(delta < (48*60*60)) r = "a day ago";
else r = (parseInt(delta / 86400, 10)).toString() + " days ago";
return r;
}
});
回答by ifaour
Here is a working example, just replace with your app id:
这是一个工作示例，只需替换为您的应用程序 ID：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Loop</title>
<style>
ul {list-style: none;}
</style>
</head>
<body>
<div id="content"></div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me/posts', { limit: 3 }, function(d) {
if(!d.data.length) return;
var html = "";
$.each(d.data, function(idx, post) {
html += "<div class='container'>";
html += "<ul>";
html += "<li>Name: "+ post.from.name +"</li>";
if(post.message) html += "<li class='message'>Message: " + post.message + "</li>";
if(post.comments) {
if( post.comments.count > 1)
html += "<li>There are " + post.comments.count + " comments</li>";
else
html += "<li>There is one comment</li>";
html += "<li><ul>";
$.each(post.comments.data, function(i, comment) {
html += "<li class=''>" + comment.message + "</li>";
});
html += "</ul></li>";
}
html += "</ul>";
html += "</div>";
});
$('#content').html(html);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'read_stream'});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
Your code is fine you only have one typoin the comments loop:
您的代码很好，您的评论循环中只有一个错字：
$.each(res.commments.data, function(i, comment) {
$。每个（RES。commments。数据，功能（I，评论）{
If you know the structure of the response, which is the case, you don't need to use the first $.each:
如果您知道响应的结构，就是这种情况，您不需要使用第一个$.each：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Loop</title>
</head>
<body>
<script>
$(document).ready(function() {
$.getJSON('json.php', function(d) {
if(!d.data[0]) return;
var html = "";
var result = d.data[0];
html += "<div class='container'>";
html += "<ul>";
html += "<li>"+ result.from.name +"</li>";
html += "<li class='message'>" + result.message + "</li>";
if(result.comments) {
html += "<li>Comments: " + result.comments.count + "</li>";
$.each(result.comments.data, function(i, comment) {
html += "<li class=''>" + comment.message + "</li>";
});
}
html += "</ul>";
html += "</div>";
$('body').html(html);
});
});
</script>
</body>
</html>
json.php:
json.php:
<?php
$var = <<<EOD
{
"data":
[
{
"id":"123",
"from":{"name":"name","id":"12"},
"message":"Message",
"comments": {
"data":
[
{
"id":"342",
"from":{"name":"name","id":"32"},
"message":"comment message 1"
},
{
"id":"341",
"from":{"name":"name","id":"21"},
"message":"comment message 2"
}
],
"count":2
}
}
]
}
EOD;
echo $var;
?>
回答by Guard
That's because you're iterating comments.dataalready!
那是因为你已经在迭代comments.data了！
What's the deal? Your dis a normal JS object(an array in this case), so you can do
这是怎么回事？你d是一个普通的 JS 对象（在这种情况下是一个数组），所以你可以做
function (d) { alert(d[0].comments.data);}
or
或者
function (d) {
$.each(d, function (i, res) {
alert(res.comments.data);
});
}
