How do I render these ingredients on react component without having to write out "strIngredient1" through "strIngredient20"? Here's a snippet of the JSON file.

  {"meals":[{   
        "idMeal":"8000",
        "strMeal":"Buffalo Cauliflower",
        "strDrinkAlternate":null,
        "strCategory":"vegeterian",
        "strDescription":,
        "strInstructions":,
        "strMealThumb":"https://gimmedelicious.com/wp-content/uploads/2016/01/caulfilower-buffalo- 
          wings-15-of-17.jpg",
        "strIngredient1":"Medium Head Cauliflower",
        "strIngredient2":"Panko Breadcrumbs",
        "strIngredient3":"Vegetable Oil",
        "strIngredient4":"Fine Sea Salt",
        "strIngredient5":"All-Purpose Flour",
        "strIngredient6":"Rice Flour",
        "strIngredient7":"Smoked Paprika",
        "strIngredient8":"Sweet Paprika",
        "strIngredient9":"Garlic Powder",
        "strIngredient10":"Onion Powder",
        "strIngredient11":"Fish Sauce",
        "strIngredient12":"Milk",
        "strIngredient13":"Buffalo Sauce, Such as Frank’s Red Hot",
        "strIngredient14":"Honey",
        "strIngredient15":"Celery Stalk, Leaves Included, Thinly Sliced",
        "strMeasure1":"1",
        "strMeasure2":"2 cups ",
        "strMeasure3":"⅓ cup",
        "strMeasure4":"½ teaspoon",
        "strMeasure5":"¾ cup ",
        "strMeasure6":"¼ cup",
        "strMeasure7":"½ teaspoons",
        "strMeasure8":"½ teaspoon",
        "strMeasure9":"1 teaspoon",
        "strMeasure10":"1 teaspoon",
        "strMeasure11":"2 teaspoon",
        "strMeasure12":"½ cup",
        "strMeasure13":"1 cup",
        "strMeasure14":"3 tablespoons",
        "strMeasure15":"1"
}]}

CodePudding user response：

You could preprocess each recipe before passing it for rendering.

var orig = {
  idMeal: "8000",
  strMeal: "Buffalo Cauliflower",
  strDrinkAlternate: null,
  strCategory: "vegeterian",
  strDescription: "",
  strInstructions: "",
  strIngredient1: "Medium Head Cauliflower",
  strIngredient2: "Panko Breadcrumbs",
  strIngredient3: "Vegetable Oil",
  strIngredient4: "Fine Sea Salt",
  strMeasure1: "1",
  strMeasure2: "2 cups ",
  strMeasure3: "⅓ cup",
  strMeasure4: "½ teaspoon",
  // rest of ingredients removed for brevity
};

function processRecipe(recipe) {
  const processedRecipe = { ...recipe };
  const ingredients = [];
  for (let i = 1; ; i  ) {
    const ingredientKey = `strIngredient${i}`;
    const measureKey = `strMeasure${i}`;
    const ingredient = processedRecipe[ingredientKey];
    const measure = processedRecipe[measureKey];
    if (!(ingredient && measure)) break;
    ingredients.push([ingredient, measure]);
    delete processedRecipe[ingredientKey];
    delete processedRecipe[measureKey];
  }
  return { ...processedRecipe, ingredients };
}

console.log(processRecipe(orig));

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

With that, the output is e.g.

{
  "idMeal": "8000",
  "strMeal": "Buffalo Cauliflower",
  "strDrinkAlternate": null,
  "strCategory": "vegeterian",
  "strDescription": "",
  "strInstructions": "",
  "ingredients": [
    [
      "Medium Head Cauliflower",
      "1"
    ],
    [
      "Panko Breadcrumbs",
      "2 cups "
    ],
    [
      "Vegetable Oil",
      "⅓ cup"
    ],
    [
      "Fine Sea Salt",
      "½ teaspoon"
    ]
  ]
}

and an ingredient list such as that is easy to loop over.

CodePudding user response：

First of all I think you're not using JSON the best way, i'd do something that looks more like that :

    {"meals":[{   
        "idMeal":"8000",
        "strMeal":"Buffalo Cauliflower",
        "strDrinkAlternate":null,
        "strCategory":"vegeterian",
        "strDescription":,
        "strInstructions":,
        "strMealThumb":"https://gimmedelicious.com/wp-content/uploads/2016/01/caulfilower-buffalo- 
          wings-15-of-17.jpg",
        "ingredients": [
          {name:"Medium Head Cauliflower", "measure":1},
          {name:"Panko Breadcrumbs", "measure": "2 cups"},
// etc ...
           ]

}]}

Then in react simply use .map

for instance

function Meal({meal}) {

...
return (
  <>
    {meal.ingredients.map((ingredient)=>{
      return (
        <div key={ingredient.name}>{ingredient.name} measurement : {ingredient.measure}</div>
      )
    }
  )}
</>

)
...

}