How to create a new array from multiple arrays-CodePudding

I'm trying to somewhat combine 3 arrays to create a new one. So the end result is

<li>array1[0]array2[0]array3[0]</li>

I tried a for loop but it ends up with 27 answers and there should only be 2 with the data I have.

  // const ingredientsList = () => {
  //   for (let i = 0; i < recipe.ingredients.length; i  ) {
  //     for (let j = 0; j < recipe.size.length; j  ) {
  //       for (let k = 0; k < recipe.amount.length; k  ) {
  //         console.log(recipe.amount[k], recipe.size[j], recipe.ingredients[i]);
  //         <li>
  //           {recipe.amount[k]}
  //           {recipe.size[j]}
  //           {recipe.ingredients[i]}
  //         </li>;
  //       }
  //     }
  //   }
  // };

I would greatly appreciate anyone's help. I'm currently working in reactjs. Each array is the same length. I have 3 arrays: ingredient list, amount, and size. So I want to combine them so they read smoothly such as "1 cup flour"

CodePudding user response：

The way you are looping through the three arrays will end up as such (in pseudo code):

Loop through the first array and for every element:
Loop through the second array and for every element:
Loop through the third array and for every element create a list item of each element at index n from each array.

Since I am not sure exactly what you are wanting I will have to assume they are the same length arrays so you can do:

for(let i = 0; i < recipe.amount.length; i  ) {
   console.log(`${recipe.amount[i]} ${recipe.size[i]} ${recipe.ingeredients[i]}`)
}

This should get you logging the appropriate results, then just create the html list elements.

CodePudding user response：

If I understand correctly based on the code in the question, you have three arrays (ingredients, size, amount).

If each of the arrays is the same length and each index's data corresponds to the data at the same index of the others, you could write a loop using the length of one of them and pass the same index into each array like...

for (let i = 0; i < recipe.ingredients.length; i  ) {
    console.log(
        recipe.ingredients[i],
        recipe.size[i],
        recipe.amount[i],
    );
}

Seeing as you're working in react though, if you have control over the data yourself, it would probably make more sense to store each instruction in an object in a recipe array, then map over that array and create the list item like...

Somewhere in the component could be something like...

this.recipe = [
  {
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  },
  {
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  },{
    ingredient: 'something',
    amount: 'some amount',
    size: 'some size',
  }
]

and in the template...

{
  recipe.map((instruction) => (
    <li>
      { instruction.amount }
      { instruction.size }
      { instruction.ingredient }
    </li>
  ));
}

CodePudding user response：

const emp1 = ["Cecilie", "Lone"]; const emp2 = ["Emil", "Tobias", "Linus"];

const allEmp = emp1.concat(emp2);

you can try using concat keyword to merge arrays. In case of more than two arrays you can use

emp3 = ["john", "lacy"]

const allEmp = emp1.concat(emp2, emp3);