关于使用 JQuery 从文本 API 加载评论的问题

Question

所以我尝试将这些评论从我获得的文本 API 加载到网页上，这里以两个为例。

[{"id":"1","product_id":"scooter","nickname":"James","review":"I'm impressed with the result","rating":"5"},{"id":"2","product_id":"scooter","nickname":"Jerry","review":"Its rubbish","rating":"1"}]

总共大约有 13 个。要将它们加载到我的 HTML 文档中，我尝试使用带有循环的 ajax 函数，然后使用 append 函数将相应的值添加到 html 文件中。我知道下面的 javascript 代码不起作用，因为所有评论都没有特定的标识符，所以我包含的代码每次都会将所有评论值粘贴到 html 文档中的每个 h4 或 p 项中。

我的问题是如何从 API 中获取昵称和评论项目，以便它们在我的 html 文档中仅出现一次？

我希望加载 2 条评论的示例。 h4 标签中的评论者姓名和 p 标签中的评论本身。

<div id="productreviews">

<img id="reviewimg1" src="reviewicon1.jpg" alt="An image of a vehicle, a stock 
    user review image.">
    <h3 class="idfont" id="reviewcaption1">Good God!!</h3>
    <h4 class="idfont idposition" id="reviewuser1"></h4>
    <p class="maintext" id="reviewmain1"></p>

<img id="reviewimg2" src="reviewicon1.jpg" alt="An image of a vehicle, a stock 
    user review image.">
    <h3 class="idfont" id="reviewcaption2">Great</h3>
    <h4 class="idfont idposition" id="reviewuser2"></h4>
    <p class="maintext" id="reviewmain2"></p>
</div>

这是我当前的 Javascript

$(document).on('ready', function(){
    var list = $("#productreviews").find('h4');
list.empty();
var promise = $.ajax('API_link_goes_here');
promise.done(function(data) {
    for(idx = 0; idx < data.length; idx++) {
     list.append('<dd>' + data[idx].nickname + '</dd>');
    }
});
    var list2 = $("#productreviews").find('p');
list2.empty();
var promise = $.ajax('API_link_goes_here');
promise.done(function(data) {
    for(idx = 0; idx < data.length; idx++) {
     list2.append('<dd>' + data[idx].review + '</dd>');
    }
}); 

Answer 1

这里是我倾向于如何完成这样的事情的 sn-p；

1. 制作一个不可见的评论 HTML 模板
2. 检索和解析数据跳过sn-p功能

3. 通过对每个项目执行以下操作来处理数据；

   -克隆模板。

   -填充克隆。

   -将克隆添加到占位符

var dataString = '[{"id":"1","product_id":"scooter","nickname":"James","review":"Im impressed with the result ","rating ":"5 "},{"id ":"2 ","product_id ":"scooter ","nickname":"Jerry ","review":"Its rubbish ","rating ":"1 "}]';

$(function() {
  var data = JSON.parse(dataString);
  var $template = $("#template");
  //var promise = $.ajax('API_link_goes_here').
  //promise.done(function(data) {
  for (idx = 0; idx < data.length; idx++) {
    var item = $template.clone();
    item.find(".user").text(data[idx].nickname); //set the nickname
    item.find(".maintext").text(data[idx].review); //set the review text
    item.show(); //toggle the visibility cause the template was hidden
    $("#reviews").append(item);
  }
  //});
});

#reviews .reviewWrapper {
  display: block;
  width: 50%;
  border: 1px solid #ccc;
  margin: auto;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='template' class='reviewWrapper' style='display:none'>
  <img src="reviewicon1.jpg" alt="An image of a vehicle, a stock 
    user review image.">
  <h3 class="idfont caption">Great</h3>
  <h4 class="idfont idposition user"></h4>
  <p class="maintext"></p>
</div>
<div>
  <div id='reviews'></div>