如何在博客中按ID调用JSON文件展示评论？代码报错求解决

原代码存在几个关键问题导致无法正常运行，逐一修正后即可实现按ID展示评论：

• 未传递评论数据：AJAX成功回调中调用commentsOn()时没有传入返回的评论数组，导致函数内comments参数为undefined
• 未遍历评论数组：接口返回的是评论数组，需要循环遍历每一条评论才能逐个渲染
• HTML标签错误：caard-header拼写错误应为card-header，且卡片标签闭合逻辑混乱，导致DOM结构错误
• textarea内容格式：评论内容应正确填充到textarea内部，避免结构错乱

以下是修正后的完整代码：

$.ajax({
  type: "GET",
  url: "https://jsonplaceholder.typicode.com/comments",
  dataType: 'json',
  success: function(comments) {
    console.log(comments);
    // 遍历每一条评论
    $.each(comments, function(index, comment) {
      commentsOn(comment);
    });
  }
});

function commentsOn(comment) {
  $("#comm").append(`
    <div class='card my-3'>
      <div class='card-header'>
        postId: ${comment.postId} | ID: ${comment.id}
      </div>
      <div class='card-body'>
        <p class='card-text'>Name: ${comment.name}</p>
        <p class='email'>Email: ${comment.email}</p>
        <textarea class='form-control comment-text' readonly>${comment.body}</textarea>
      </div>
    </div>
  `);
}

关键修正说明 #

• 使用$.each遍历评论数组，将单条评论传入渲染函数
• 修正card-header拼写错误，重新梳理卡片DOM结构，确保标签正确嵌套
• 使用模板字符串（反引号）替代字符串拼接，让HTML结构更易读且避免拼接错误
• 给textarea添加readonly属性防止用户编辑，同时正确填充评论内容

内容的提问来源于stack exchange，提问作者new brain