I am dealing with an array of objects that looks like this:
var test_data = [
{
"id" : "Test01", //Must be a string form ID
"test_info" : "This is the test information",
"test_rating" : 5
},
{
"id" : "Test02", //Must be a string form ID
"test_info" : "This is the test information",
"test_rating" : 2
}
Currently, I am using the following code to populate an unordered list (but it only displays the id)
fieldOutputId.forEach(function(id) {
$("#idList").append('<li><a href="#">' + id +" "+ "</a></li>");
});
I want to display stars and the value of test_rating stored in
fieldOutputRating</code as shown in this picture (stars represented by red text)</p>
<p>Reference Image :<a href="https://i.sstatic.net/Y0eBj.png" rel="nofollow noreferrer"></a></p>
<p><strong>-----EDIT-----</strong></p>
<p>Thanks to @ChrisG, we have achieved displaying id & test_rating inline:</p>
<pre><code>test_data.forEach(function(item) { $("#idList").append('<li><a href="#">' + item.id+ '</a><div class="fa fa-star">'+ item.test_rating+ "</div></li>"); })
Using the above code successfully displays the stars inline using font-awesome library with class="fa fa-star
This is the current output:
https://i.sstatic.net/7uzJl.png
Although the test_rating is displayed, the stars are not. Any help on how to fix this issue would be greatly appreciated.