Measuring Feedback: Utilizing Angular 4 to calculate review ratings

Question

Measuring Feedback: Utilizing Angular 4 to calculate review ratings

I'm facing a challenge while working on a review form using Firebase and Angular 4. The issue is with calculating the total length of added reviews and the sum of their ratings. Each time a new review is submitted, it gets pushed to a list of objects representing recently added reviews. I am struggling to iterate over these reviews and calculate the average rating by dividing the total sum by the number of reviews.

https://i.sstatic.net/0Z1u0.png

review.component.ts

export class ProductReviewsComponent implements OnInit {
  @Input("product") product: Product;
  currentRate = 8;
  review = {};
  reviews = {};
  description;
  product$;
  number = [];

  constructor(private reviewService: ReviewsService) {}

  async ngOnInit() {
    this.product$ = await this.reviewService.getReview(this.product.$key);
    this.number = [];
    console.log(this.number);
  }

  addReview() {
    let review = {
        rate: this.currentRate,
        description: this.review
    }

    this.reviewService.saveReview(this.product.$key, review);
  }
}

html

<form #f="ngForm">
  <div class="form-group">
    <ngb-rating [(rate)]="currentRate"></ngb-rating>
    <textarea #description="ngModel" [(ngModel)]="review.description" name="description" type="text" class="form-control" placeholder="Dodaj opis..."
      required></textarea>
    <div class="alert alert-danger" *ngIf="description.touched && description.invalid">
      <div *ngIf="description.errors.required">Name is required</div>
    </div>

  </div>

  <button (click)="addReview()" class="btn btn-primary">Dodaj opinię</button>

  <div *ngFor="let review of product$ | async">
    {{ review.rate }} {{ review.description.description }}
  </div>


</form>

angular typescript firebase firebase-realtime-database

Answer 1

Answer №1

firebase.database.DataSnapshot forEach

If you take a closer look, it appears that you can easily loop through the response snapshot and add the key:value pairs to an array (only if the key matches your desired key). After that, using .then, you will have the length of your array along with the data for further processing.

// Assuming we have the following data in our Database:
{
  "users": {
    "ada": {
      "first": "Ada",
      "last": "Lovelace"
    },
    "alan": {
      "first": "Alan",
      "last": "Turing"
    }
  }
}

// Iterate through users sequentially using the forEach() method. The callback
// provided to forEach() will be executed synchronously for each child DataSnapshot:
var query = firebase.database().ref("users").orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      // The variable 'key' will represent "ada" on the first iteration and "alan" on the second
      var key = childSnapshot.key;
      // The variable 'childData' will contain the actual content of the child
      var childData = childSnapshot.val();
  });
});

Answer 2

firebase.database.DataSnapshot forEach

If you take a closer look, it appears that you can easily loop through the response snapshot and add the key:value pairs to an array (only if the key matches your desired key). After that, using .then, you will have the length of your array along with the data for further processing.

// Assuming we have the following data in our Database:
{
  "users": {
    "ada": {
      "first": "Ada",
      "last": "Lovelace"
    },
    "alan": {
      "first": "Alan",
      "last": "Turing"
    }
  }
}

// Iterate through users sequentially using the forEach() method. The callback
// provided to forEach() will be executed synchronously for each child DataSnapshot:
var query = firebase.database().ref("users").orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      // The variable 'key' will represent "ada" on the first iteration and "alan" on the second
      var key = childSnapshot.key;
      // The variable 'childData' will contain the actual content of the child
      var childData = childSnapshot.val();
  });
});

Measuring Feedback: Utilizing Angular 4 to calculate review ratings

Answer №1

Similar questions

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

Attempting to invoke a TypeScript firebase function

The following error was encountered while building Angular 2 with Webpack at src/app/userManagement/unlockUserID/unlockUserID.component.ts, on line 7

Best practices and distinctions when it comes to typing in TypeScript functions

Adding a fresh element to an object array in TypeScript

Create allowances for specific areas

"What is the best way to apply multiple filters to an array in a React

I need assistance with adding a button to a table cell that triggers an action when clicked

Troubleshooting Angular and ASP.NET Core MVC: Addressing the "Uncaught SyntaxError: Unexpected token '<'" issue with index file references post deployment

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

Retrieving the key from an object using an indexed signature in Typescript

What is the best way to update properties in a child component using React hooks?

The Angular Reactive Forms error message indicates that attempting to assign a 'string' type to an 'AbstractControl' parameter is invalid

How can I add a parameter to a JSON URL in Angular?

I am experiencing difficulties with implementing Angular material components in my project

Angular 8 combined with Mmenu light JS

Exploring nested JSON responses in Angular 2 with TypeScript

The Angular2 cli throws an error stating: "Cannot add a new entry to an existing one."

Can you provide the syntax for a generic type parameter placed in front of a function type declaration?

Tips on implementing zod schema types with remapped fields using the toZod method