Random food generator

JavaScript
1

Hello All!

I am currently attempting to build a site that generates a random meal upon clicking the “generate” button. Attached below will be my code. The issue I am running into is the following; upon clicking the generate button, I am met with numbers, instead of names and nutrition values. I recognize that this is what the Math.random() and Math.floor() are doing - but why is this not converted to an index referencing the food in question? Any help is appreciated. Thank you. For an example of how this should (ideally) work, I will provide a link to a similar project, that has been completed by another user.

Similar Concept

Javascript:


// Food(s) array w/nested Objects. //

const foods = [
    {  "name": 'Chicken and Rice',
        "protein": '45g',
       "fat": '12g',
       "carbohydrates" : '35g',
       "total calories": '428'
    },
    {  "name":'Guac Omelette',
    "protein":'30g',
    "fat":'20g',
    "carbohydrates":"17g",
    "total calories": '368'
   },
   {
    "name":"beef rice",
    "protein":'48g',
    "fat":'22g',
    "carbohydrates":'52g',
    "total calories":'598'
   }
   
   ]
   
for (let i=0; i<foods.length; i++){
    console.log(foods[i])
}


function getFood()
{
    let randomFood = [Math.floor(Math.random()*foods.length)];
    document.getElementById("randpick").textContent=randomFood;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Meal Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">

<h1 class="question">Feeling Hungry?</h1>
<h2 class="question">
Struggling to come up with healthy meals?
</h2>

<button class="generate" id="generate" onclick="getFood()">
Click Me To Generate a Random Meal!
</button>

<p class="info">
    A balanced macronutrition dietary profile is of utmost importance for overall health and well-being. It refers to the consumption of an appropriate ratio of macronutrients, including carbohydrates, proteins, and fats, in the right proportions. Such a diet provides the body with essential nutrients, energy, and the building blocks necessary for various bodily functions.


</p>


<p id = "randpick">

Alpha Omega
</p>

    </div>
    
    
    
<script src="logic.js"></script>
</body>
</html>
2

UPDATE:

Altered the following line of code:

    let randomFood = foods[Math.floor(Math.random()*foods.length)];

Now, when the generate button is pressed, the following is displayed:
[object Object]

I am unsure what might be causing this issue.

3

What is foods? What is the data type?

What would a single element of foods be?

1 Like
4

Foods is an array with nested objects within it ; the datatype of this would technically be an object, but more specifically a set of strings.

A single element of “foods” should be “food”

I think I get where you’re going with this ; do I have to find a way to declare an individual food within the food(s) array?

5

What exactly are you hoping to display when the button is clicked? Are you wanting just the name of the food to show or the other details. If the latter, then you would need to convert the object into a string (one option would be to use the JSON.stringify method.

If you want to format all the details of each object to display them, you will need to decide on how best to display each property’s value. You could iterate through the keys of the object and display the key and the value in separate elements.

6

Im hoping to display the recipe name as well as the nutrition facts, so essentially all of the properties of each object. Im having a bit of trouble using the
JSON.stringify method, as when I apply it to the foods array, im met with an undeclared variable exception.

7

UPDATE:

I have modified the following code, and now see all of the foods displayed at once. Now, I have to find a way to format these foods, and make it display only one of the foods, not every single object within the array;

function getFood()
{
    let string = JSON.stringify(foods);
    let randomFood = string[Math.floor(Math.random()*foods.length)];
    document.getElementById("randpick").textContent=string;
}
8

You have the object in randomFood. Why are you stringifying the array foods?

9

OHH This makes sense!!

I went back in and re-worked some of my code , and am now able to pull one specific object from the Array. Listed Below will be my updated code;

function getFood()
{
    let food = foods.values(foods.name);
let userFood = foods[Math.floor(Math.random()*foods.length)];
let choice = JSON.stringify(userFood)
document.getElementById('randpick').textContent=choice
console.log(userFood);

}

Now, it is displaying ONE food object from the array (which is what I wanted.) How would I go about formatting this? My mind instantly goes to using DOM manipulation, as I don’t believe CSS would work?

10

You just need to dynamically add new elements by iterating through the objects’s properties (look at Object.keys() or Object.entries() method on how to do something like this.