Styjun

So I'm trying to load these reviews from a text API I've been given onto a webpage, here are two as an example.

["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"]

There are about 13 in total. To load them into my HTML document, I'm trying to use an ajax function with a loop, then adding the corresponding values into the html file with an append function. I know the javascript code below doesn't work because as none of the reviews have specific identifiers, the code I included pastes all of the review values in every h4 or p item in the html document every time.

My question is how do I fetch the nickname and review items from the API so that they only appear once each on my html document?

Example of where I want 2 reviews to load. The reviewer name in the h4 tag and the review itself within the p tag.

<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>

Here is my current 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>');
 
); 

Here is a snippet of how I tend to accomplish something like this;

1. Make an invisible review HTML template


2. retrieve and parse the data skipped for snippet functionality
   


3. 
   

   process the data by doing the following for each item;

   
   
   

   -cloning the template.

   
   
   

   -filling in the clone.

   
   
   

   -adding the clone to a placeholder

   
   

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>