提问人：new brain 提问时间：3/5/2023 最后编辑：76484new brain 更新时间：3/6/2023 访问量：62
如何在jquery中按ID过滤评论？
How to filter comments by ID in jquery?
问：
在这个项目中，我想对评论进行过滤器，以便它们将按 ID 出现在所属帖子中。
$(function () {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
dataType: 'json',
success: function (result) {
var params = new window.URLSearchParams(window.location.search);
var postId = params.get('post');
var postObj = result.filter(function (postElm) {
return postId == postElm.id;
});
if (postObj.length < 1) {
alert('post not found');
return;
}
renderPage(postObj[0]);
}
});
function renderPage(post) {
$("#loop").append(
"<div class='card bg-success text-white'>User ID:" + post.userId +
"<div class='card-header'>ID:" + post.id + "</div>" +
"<div class='card-body'>" +
"<a post=" + post.id + "'><h5 class='card-title'>" + post.title + "</h5></a>" +
"<p class='card-text'>" + post.body + "</p>" + "</div>" +
"</div>");
}
$.getJSON('https://jsonplaceholder.typicode.com/comments', function (data) {
data.forEach(comments => {
var comObj = data.filter(function (comElm) {
return comElm.id == postId;
console.log(comElm);
});
$("#comm").append(
`<div class='card bg-secondary text-white'>
postId: ${comments.postId}
<h6 class="caard-header ">ID: ${comments.id}
<div class="caard-body">Name: ${comments.name}
<p class="email">Email: ${comments.email}</p>
<p class="form-control comment-text text-white">Body: ${comments.body}</p>
</div>`
);
});
});
});
答：
1赞
76484
3/5/2023
#1
注释提取处理程序存在一些问题。
首先，未在函数中定义。它是在第一次调用的处理程序中定义的，这是一个不同的范围。您需要将其向上移动，以便它可用于两个功能。你可以把它放在线条之后。postIdsuccessajax$(function () {
接下来，参数是一个数组 - 一个注释数组。在此数组上执行循环，然后对此循环的每次迭代执行 a 没有多大意义。这将对数据中尽可能多的项目执行相同的筛选操作 - 即 500 次！dataforEachfilter
过滤器的结果甚至没有使用，过滤器是错误的，因为它匹配 on 而不是 。comObjcomElm.idcomElm.postId
此外，在第一次调用（对于帖子）的处理程序中，您应该使用 .find 返回单个帖子，而不是过滤到帖子数组。successajax
$(function() {
// var params = new window.URLSearchParams(window.location.search);
// params.get('post') will return a String,
// we must convert that to a Number
// var postId = Number(params.get('post'));
const postId = 2;
function renderPage(post) {
$("#loop").append(
"<div class='card bg-success text-white'>User ID:" + post.userId +
"<div class='card-header'>ID:" + post.id + "</div>" +
"<div class='card-body'>" +
"<a post=" + post.id + "'><h5 class='card-title'>" + post.title + "</h5></a>" +
"<p class='card-text'>" + post.body + "</p>" + "</div>" +
"</div>"
);
}
$.getJSON("https://jsonplaceholder.typicode.com/posts", function (posts) {
// use .find so we get a single post
const post = posts.find(function(post) {
return postId == post.id;
});
if (post === undefined) {
alert('post not found');
return;
}
renderPage(post);
});
$.getJSON('https://jsonplaceholder.typicode.com/comments', function(comments) {
// for each `comment` in `comments`:
comments.forEach(comment => {
// if the postId of the comment matches our global `postId`:
if (comment.postId === postId) {
$("#comm").append(
`<div class='card bg-secondary text-white'>
postId: ${comment.postId}
<h6 class="caard-header ">ID: ${comment.id}</h6>
<div class="caard-body">
Name: ${comment.name}
<p class="email">Email: ${comment.email}</p>
<p class="form-control comment-text text-white">Body: ${comment.body}</p>
</div>`
);
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loop"></div>
<div id="comm"></div>
评论