Can i use a for statement to create a array that includes api data?-CodePudding

I'm learning and doing a project using react hooks. It's a recipe app that uses a api from MealDB.

In this case there are multiple ingredients, each comes from separate keys in the API such as strIngredient1 up to strIngredient20. I want to put them all in a array so i can use a map to render them all in a list. Here is a example of how it is:

    const { strIngredient1, strIngredient2, strIngredient3, strIngredient4,
      strIngredient5, strIngredient6, strIngredient7, strIngredient8, strIngredient9,
      strIngredient10, strIngredient11, strIngredient12, strIngredient13, strIngredient14,
      strIngredient15, strIngredient16, strIngredient17, strIngredient18, strIngredient19,
      strIngredient20 } = recipeIdState;

    const ingredientArray = [strIngredient1, strIngredient2, strIngredient3,
      strIngredient4, strIngredient5, strIngredient6,
      strIngredient7, strIngredient8, strIngredient9,
      strIngredient10, strIngredient11, strIngredient12, strIngredient13, strIngredient14,
      strIngredient15, strIngredient16, strIngredient17, strIngredient18, strIngredient19,
      strIngredient20];
    setIngredients(ingredientArray);

I feel like it's unecessary to use so much space to create a simple array, so my question is, can i use a for to name the values and put them in the recipeIdState variable?

I'm thinking something like:

for(let i = 1; i <= 20, i  ) {
  const { `strIngredient${i}`} = recipeIdState;
  ingredientArray.push(`strIngredient${i}`);
}
  setIngredients(ingredientArray)

I tried creating a simple array with multiple values using simple javascript destructuring, but i feel like it's not the best way to make a clean code.

CodePudding user response：

Lets assume you get your API response JSON and put it in a variable of its own, call it data. Then you can use filter() on data to find only these keys that start with strIngredient and extract them into a separate array for a future use.

let data = {
  "strIngredient1": "apple",
  "strIngredient2": "chocolate",
  "strIngredient3": "honey",
  "strIngredient4": "carrots",
  "strCategory": "cakes",
  "strInstructions": "....",
  "strDrinkAlternate":null
};

let ingredients = Object.keys(data).filter(function(key) {
  return key.startsWith("strIngredient");
}).reduce(function(obj, key) {
  obj[key] = jsonObject[key];
  return obj;
}, {});

console.log(ingredients); 
// Output: { "strIngredient1": "apple", "strIngredient2": "chocolate", "strIngredient3": "honey", "strIngredient4": "carrots" }

After that, of course you can do all the classic JSON.parse() to convert it to an array.

CodePudding user response：

You can use Object.values() to get an array of all property values from an object.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));

Or, if you want to iterate over each property you can use the for...in statement:

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}