我从返回博文信息的 API 调用数据。我已经获取了数据并按月将其排序到一个数组中。我似乎能够将信息打印到控制台,但实际上无法将此信息显示为 HTML。我跑进了这个循环的兔子洞。
我希望每个帖子都显示在它自己的 div 中。例如,所有 1 月的帖子都在自己的 div 中,2 月在另一个 div 中,等等。
这是原始 JSON Data 的示例. CTRL + F 并输入“文本帖子”
我正在使用 ajax 调用 API
//...
$.ajax({
type: 'GET',
url: "http://api.tumblr.com/v2/blog/{blog}.com/posts/text?api_key={APIKey}",
dataType: 'jsonp',
success: function(data){
let groupByMonth = Object.create(null);
var objectPosts = data.response.posts;
$.each(objectPosts, function(key, value) {
let getTitle = objectPosts[key].title
let getDescription = objectPosts[key].body
let getDate = objectPosts[key].date
let getMonth = getDate.split('-')[1]
if (!groupByMonth[getMonth]) {
groupByMonth[getMonth] = [];
}
groupByMonth[getMonth].push({
Title: getTitle,
Description: getDescription,
DatePublished: getDate
});
});
let byMonth =
Object.entries(groupByMonth)
.map(([k, v]) => ({[k]: v}));
console.log(byMonth);
// The Tricky Part
$.each(byMonth, function(key, value) {
var outer = byMonth[key]
$.each(outer, function(k, v) {
var inner = outer[k]
var jData = JSON.stringify(v);
$('<div class = "month"> </div>').appendTo('#blog-posts')
$.each(inner, function(i, obj) {
var title = inner[i].Title
var description = inner[i].Description
var date = inner[i].DatePublished
$('<div class = "post"><h2>' + title + '</h2><p>'
+ description + '</p>').appendTo('.month')
})
}
我为输出使用了虚拟数据。
console.log(byMonth)
返回一个嵌套的 JS 数组
0:
11:
0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}
1: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}
2: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}
1:
09:
0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-09-22 12:34:40 GMT"}
2:
08:
0: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}
1: {Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}
11
表示十一月,09
是九月等
console.log(jData)
返回相应月份的数据
[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-11-29 16:23:35 GMT"}]
[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-09-22 12:34:40 GMT"}]
[{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"},{Title: "Sample Title", Description: "Sample Desc", DatePublished: "2016-08-29 16:23:35 GMT"}]
我觉得接近解决方案了,但我仍然坚持将信息实际输出到 HTML。附加 title
后和 description
至 <div class = "month">
,每个 div 包含所有月份的所有标题和描述,而不是它们自己的月份。我试过了 for
循环也没有运气。解决方案可能很简单。提前致谢!
最佳答案
在您的解决方案中,您最终会得到多个 <div class="month"/>
元素和数据将附加到所有这些元素。
解决方法:在外循环中,获取对您附加的月份元素的引用,然后在内循环中使用它来附加到。
var blogPosts = $('#blog-posts'); // get reference once to avoid repeat lookups
$.each(byMonth, function(key, value) {
var outer = byMonth[key]
$.each(outer, function(k, v) {
var inner = outer[k];
var jData = JSON.stringify(v);
var monthBlogPosts = $('<div class = "month"> </div>').appendTo(blogPosts);
// ^ obtain reference here
$.each(inner, function(i, obj) {
var title = inner[i].Title;
var description = inner[i].Description;
var date = inner[i].DatePublished;
$('<div class = "post"><h2>' + title + '</h2><p>'
+ description + '</p>').appendTo(monthBlogPosts);
// ^ use reference here
})
}
关于javascript - 从 JSON 数据按组显示嵌套的 JS 数组到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51818714/