Keeping Wordpress style


#1

Hi, i’m using ionic to create a wordpress news reader app, and i have some problems with css style.

In my wordpress page, i have a product review score, represent by STARS, like in this image:

My wordpress theme (Sahifa) create the stars by converting number into star (for example, in the above image, 4 stars = 80 points).

And this is the custom fields from JSON API:

"custom_fields": {
        "taq_review_score": ["82.285714285714"]
    },

So, how can i re-create this in my ionic app?

Thank you so much.


#2

There’s no automatic way to do this in ionic or anywhere for that matter. But you can simulate the star rating by applying the following logic:

Run a function called calulateStar(taq_review_score) like so

  1. Multiply the taq_review_score by 100 (and then multiply by 5), then round down to get the closest integer value (in this case that would 4)
  2. Run an loop for the view that outputs/renders a star icon based on the value from (1) which in this case should output 4 html star icons. then add the actual numerical value beside it (82.2857…)

Hope this helps.


#3

Thank you so much.

But I’ve just found another problem here:

"custom_fields": {
    "taq_review_score": ["82.285714285714"]
},

As you can see, the taq_review_score return a STRING ‘[“82.285714285714”]’ (including the brackets), not a NUMBER, so I can’t use it to calculate.

Do you know how to turn it into number?


#4

Answer: To convert a string to a number, use the JavaScript functions

http://www.javascripter.net/faq/convert2.htm

parseFloat (for conversion to a floating-point number) or
parseInt (for string-to-integer conversion).
parseFloat syntax: parseFloat(string)

How it works:
The argument of parseFloat must be a string or a string expression. The result of parseFloat is the number whose decimal representation was contained in that string (or the number found in the beginning of the string). If the string argument cannot be parsed as a decimal number, the result will be NaN (not-a-number value).

Examples (comments in each line give the conversion results):

parseFloat(‘1.45kg’) // 1.45
parseFloat(‘77.3’) // 77.3
parseFloat(‘077.3’) // 77.3
parseFloat(‘0x77.3’) // 0
parseFloat(’.3’) // 0.3
parseFloat(‘0.1e6’) // 100000
parseInt syntax: parseInt( string [, base] )


#5

Okay.

I found this Ionic Rating plugin that help me render the stars. I can implement it now, but i get issue displaying it correctly.

Firstly, this is my code:

HTML View:

<div ng-if="calStar(post.custom_fields.taq_review_score)">
	<rating ng-model="rate" max="max"></rating>
</div>

Controllers.js

$scope.max = 5;
$scope.calStar = function(taq_review_score){
	$scope.rate = parseFloat(taq_review_score)/20;

	console.log($scope.rate); // for example, 82/100 point will be converted to 4 for 4/5 stars rating

	return $scope.rate;
	
}

And this is the problem: It ALWAYS show 5 Stars, not the correct number of stars i want (you know, it’s a rating system).

I don’t know where it goes wrong.