CODEWITHSUNDEEP
jqueryjsonajax
Giant Ape
Giant Ape

Reputation: 85

is possible rating star from json value?

i wondering it is possible to get a populate the glyphicon-star from the json value in ajax? i have a json file like this:

[
  {
    "star": 4
  },{
    "star": 3
  },{
   "star": 5
  }
]

and in my ajax:

$(function($){
  $.ajax({
    url: './dataModel/star.json',
    method: 'get',
    dataType: 'json',
    success: function(data){
      for(var i = 0; i < data; i++){
        output = '';

        // if i do like this then will not populate the glyphicon-star -
        // from the value of star in json.
        output += '<p class="glyphicon glyphicon-star">' + data[i].star + '</p>';
        $('.star').html(output);
      }
    }
  })
})

i wondering if someone can teach me how to populate that. any suggestion and idea i thank you so much. kind of regard, ape

Upvotes: 1

Views: 1802

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Build your HTML (inside the for or forEach) using String concatenation.
Than append the finished product only once. After the loop.

(I used FontAwesome for demo, you replace the fa fa-star with glyphicon glyphicon-star) 

var data = [
  {
    "name" : "Piggy the Cat",
    "star": 4
  },{
    "name" : "Alice in Foobar",
    "star": 3
  },{
    "name" : "Lorem the Ipsum",
    "star": 5
  }
];


// success: function(data) {
var HTML = ""; // Start the HTML string for concatenation
data.forEach(function( ob ) {
  for(var i=0; i<5; i++) {  // We need 5 stars
    var icoClass = i<ob.star ? "fa fa-star" : "fa fa-star-o"; // full or empty star?
    HTML += "<i class='"+ icoClass +"'></i>"; // concatenate stars
  }
  HTML += " "+ ob.name +"<br>"; // and concatenate the cool movie name
});
document.getElementById("movies").innerHTML = HTML; // Finally insert
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div id="movies"></div>

There's another JS-simpler way, but involves a bit of CSS.

This time the JS speaks by it-self:

var data = [
  {
    "name" : "Piggy the Cat",
    "star": 4
  },{
    "name" : "Alice in Foobar",
    "star": 3
  },{
    "name" : "Lorem the Ipsum",
    "star": 5
  }
];

// success: function(data) {
var HTML = "";
data.forEach(function( ob ) {
  HTML += "<i class='star-"+ ob.star +"'></i> "+ ob.name +"<br>";
});
document.getElementById("movies").innerHTML = HTML;
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css");
i[class^=star-]:after{font: normal normal 16px/1 FontAwesome;}
.star-1:after{content:"\f005\f006\f006\f006\f006";}
.star-2:after{content:"\f005\f005\f006\f006\f006";}
.star-3:after{content:"\f005\f005\f005\f006\f006";}
.star-4:after{content:"\f005\f005\f005\f005\f006";}
.star-5:after{content:"\f005\f005\f005\f005\f005";}
<div id="movies"></div>

https://fortawesome.github.io/Font-Awesome/cheatsheet/

Good "news"?

You don't need any special font to get Unicode Character Stars:

★    &#9733;    \2605
☆    &#9734;    \2606

.star-3:before{content:"\2605\2605\2605\2606\2606";}
<span class="star-3"> Good News!</span>

Upvotes: 4

Related Questions