Is there something blocking a map method inside of a for loop?

Question

I have JSON data stored in a file titled recipes.json (it's local) and I'm using state hooks and storing that data in a state variable titled "recipes". For reference,

here's local .json data structure:

[
    {"id": "0001",
    "title": "Chicken Pot Pie",
    "url": "https://www.pillsbury.com/recipes/classic-chicken-pot-pie/1401d418-ac0b-4b50-ad09-c6f1243fb992",
    "time": {
        "prepTime": 25,
        "cookTime": 40
    },
    "ingredients": [
        "CHICKEN "
    ]
},

Here's the state variable declaration and assignment:

const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const fetchRecipes = async () => {
      const response = await fetch('recipes.json');
      const recipesData = await response.json();
      setRecipes(recipesData);
    };
    fetchRecipes();
  }, []);

I have an array that I know is containing a dynamic ingredient list and am printing it to the user at any given time to display what's contained within. It's a variable titled allIngredients.

I'm trying to run a for loop through the diffrent json objects by id, per id map() the ingedients into an array arrayToCheck, and then compare that finished-per-recipe arrayToCheck to the user-created allIngredients, but I'm getting an error in my function: "The parser expected to find a '}' to match the '{' token here." I know it's no where else in my code because I haven't altered anything else and it was functional before adding this block:

  const useRecipes = () => {
    let arrayToCheck = [];
    for (recipes.id; recipes.length; recipes.id++) {
      recipes.map((map.recipe) => {
        arraytoCheck = arrayToCheck.push(recipe.ingredients.toUpperCase())
        if (arrayToCheck.sort() === allIngredients.sort()) {
          return recipe.title;
        }
      })
      arrayToCheck = [];
    }
  }

I know this may seem complicated (I'm newer to Stack Overflow, so ask any clarifying questions. Thanks in advance for the assistance.

your for loop doesn't have initializer variable, you're using a `map`, map returns a new array. better read about `forEach` loop — boxdox, Apr 08 '22 at 11:59

Mozart · Accepted Answer · 2022-04-08T17:07:07.137

0

on the forth line inside useRecipes try changing

recipes.map((map.recipe) => {

to

recipes.map((recipe) => {

but since you are not returning from map, you can use a normal loop instead of map.

Update

Notes:

array.push(...) automatically adds the new element to the array so the is no need to replace the whole array.

arrayToCheck.push(recipe.ingredients.toUpperCase()); //this is enough no need for arrayToCheck =

it is not clear what are you trying to achieve when comparing two sorted arrays check array comparison here

what is the point from passing recipeTitle to the method when you are not using it inside the loop and how can you rely on its value when it is being replaced all the time and you will always end up getting the last value.

and it is not clear what is the purpose of the outer loop looping over the id of recipes !!

take some time to understand javascript and loops

edited Apr 08 '22 at 17:07

answered Apr 08 '22 at 12:00

Mozart

2,117
2
20
38

oof. simple mistake on my part. Thank you for the other set of eyes. new problem: – anon9451 Apr 08 '22 at 16:04
Now I've got "Functions are not valid as a React child. I've updated my code block to such `const useRecipes = (recipeTitle) => { for (recipes.id; recipes.length; recipes.id++) { var arrayToCheck = []; var recipeTitle = ""; recipes.map((recipe) => { arrayToCheck = arrayToCheck.push(recipe.ingredients.toUpperCase()) if (arrayToCheck.sort() === allIngredients.sort()) { recipeTitle = recipe.title } }) arrayToCheck = []; } return recipeTitle }` and then in my JSX I have: – anon9451 Apr 08 '22 at 16:06
`
{useRecipes}
` Any ideas? – anon9451 Apr 08 '22 at 16:06
I'd like to help but I'm not a hardcore react dev and you should not post code like this in a comment is is not readable, check Stack overflow guidelines since you are new here. – Mozart Apr 08 '22 at 16:40
from a javascript point of view there is a lot going on in here. I'll update my answer with some notes that might help you out. – Mozart Apr 08 '22 at 16:44
Got it, thanks for your help. Next time I'll update the question or form a different question. And I'm going to take your advice to heart and revisit documentation on loops in general. Thank you for your patience. – anon9451 Apr 08 '22 at 18:30

Is there something blocking a map method inside of a for loop?

1 Answers1

{useRecipes}