Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Question

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Experimenting with Ionic2 and Typescript has been my recent focus.

I have an object that contains various meals, calorie counts, and meal types (such as vegan).

This is how the object looks:

[
   {
      "id":14093,
      "name":"Proteinshake mit Wasser &#8211; ESN Designer Whey Protein",
      "description":"",
      "thumbnail":null,
      "image":null,
      "calories":[
         "200"
      ],
      "type":[
         "snack"
      ],
      "nutrition":[
         "pescetarier",
         "standart",
         "vegetarisch"
      ]
   },
   {
      "id":14088,
      "name":"Omelette mit Garnelen",
      "description":"",
      "thumbnail":null,
      "image":null,
      "calories":[
         "400"
      ],
      "type":[
         "fruehstueck",
         "gericht"
      ],
      "nutrition":[
         "pescetarier",
         "standart",
         "vegetarisch"
      ]
   }
]

Now I am looking to create a random meal plan.

I aim to include 3 random meals with 400 calories each and 2 Snacks with 200 calories each.

Is there a way to select meals randomly based on their calorie value?

angular typescript ionic2

Answer 1

Answer №1

Yes, it is absolutely achievable. Check out this simple demo on plunker to see how you can generate multiple meal plans effortlessly.

The code provided is quite clear and easy to understand:

import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  // Array containing all available meals
  private mealLists: Array<any> = [{...}, {...}, ...]; 

  // Array to store randomly generated meal plans
  private mealsPlan: Array<any> = [];

  constructor() { }

  // Generates a meal plan with specified *mealCount* and *calories*
  public getMealPlan(mealCount: number, calories: number) {

    // Reset data for new plan
    this.mealsPlan = [];

    for(let i=0; i<mealCount; i++) {
      // Retrieve meals with specified calorie count
      let selectedMeals = this.getMealsWithCertainCalories(calories);

      // Select a random meal from the list
      let randomMeal = this.getRandomMeal(selectedMeals);

      // Add the selected meal to the plan
      this.mealsPlan.push(randomMeal);
    }
  }

  // Filter meals based on calorie count
  private getMealsWithCertainCalories(calories: number) {
    return this.mealLists
      .filter(function(aMeal){
        if(parseInt(aMeal.calories[0]) == calories) {
          return true;
        } else {
          return false;
        }
      });
  }

  // Get a random meal index within the range of selected meals
  private getRandomMeal(selectedMeals) {
    let randomIndex = Math.floor((Math.random() * selectedMeals.length) );
    return selectedMeals[randomIndex];
  }

}

Note that the magic happens in the filter(...) and Math.random() methods.

Answer 2

Yes, it is absolutely achievable. Check out this simple demo on plunker to see how you can generate multiple meal plans effortlessly.

The code provided is quite clear and easy to understand:

import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  // Array containing all available meals
  private mealLists: Array<any> = [{...}, {...}, ...]; 

  // Array to store randomly generated meal plans
  private mealsPlan: Array<any> = [];

  constructor() { }

  // Generates a meal plan with specified *mealCount* and *calories*
  public getMealPlan(mealCount: number, calories: number) {

    // Reset data for new plan
    this.mealsPlan = [];

    for(let i=0; i<mealCount; i++) {
      // Retrieve meals with specified calorie count
      let selectedMeals = this.getMealsWithCertainCalories(calories);

      // Select a random meal from the list
      let randomMeal = this.getRandomMeal(selectedMeals);

      // Add the selected meal to the plan
      this.mealsPlan.push(randomMeal);
    }
  }

  // Filter meals based on calorie count
  private getMealsWithCertainCalories(calories: number) {
    return this.mealLists
      .filter(function(aMeal){
        if(parseInt(aMeal.calories[0]) == calories) {
          return true;
        } else {
          return false;
        }
      });
  }

  // Get a random meal index within the range of selected meals
  private getRandomMeal(selectedMeals) {
    let randomIndex = Math.floor((Math.random() * selectedMeals.length) );
    return selectedMeals[randomIndex];
  }

}

Note that the magic happens in the filter(...) and Math.random() methods.

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Answer №1

Similar questions

shifting the angular directives to alternate the bootstrap class of hyperlinks

It appears that the library (@ngx-translate/core) that contains TranslateModule may not be compatible with Angular Ivy, resulting in an error in the Angular application

What is the reason behind the sudden red coloring of parentheses in Visual Studio Code while typing in TypeScript?

Tips for modifying date format in Angular 8

Is it Possible for Angular Layout Components to Render Content Correctly even with Deeply Nested ng-container Elements?

Some font-awesome icons are not appearing on the screen

Adjust the size and color of text in Chart.js using Angular 5

Sending selected IDs from the JSON data

Why include HTML in our webpack bundle?

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

What classification should be given to children when they consist solely of React components?

Displaying a component within an ngFor loop

Add items to QueryList in Angular

Unexpected silence from the Express web server

Encountering the "Unrecognized teardown 1" error when subscribing to an Observable in Typescript and Angular2

Having trouble with Angular's ActivatedRoute and paramMap.get('id')?

Encountering a style-loader error while trying to upgrade to Angular 15 using @angular-builders/custom-webpack

Automated Import Feature in Visual Studio Code

What is the method for adjusting the time format?

Adding comments in TypeScript: A quick guide