JavaScript Foreach value in array to string

Question

Looking for some help in JS. I have an array of array's

var totalOrder = []
function CafeService(meal, starter, main, dessert){//takes value from text box input
var customerOrder = [meal, starter, main, dessert]

totalOrder.push(customerOrder ); 
}

This is populating correctly.There can be a unlimited amount of orders. I want to check through the order before sending to the kitchen. How can I put each index in the array into strings e.g. to populate the below:

var mealTime;
var mealStarter;
var mealMain;
var mealDessert;

I expect I need to do this with a for each?

foreach (customerOrder in totalOrder){
    var mealTime; //how to populate
    var mealStarter;
    var mealMain;
    var mealDessert;
}

EDIT Total Order with one customers order:

var totalOrder = ["Breakfast","Coffee","Toast","Apple"]

@NinaScholz string sorry I see mealTIme is a poor name. E.g. the waiter will choose breakfast, lunch, Dinner. — Phil3992, Oct 09 '17 at 15:12
for example totalOrder.map((customOrder,index) => { ...do what you have to }) — Vyacheslav, Oct 09 '17 at 15:13
@NinaScholz please dont `reduce` the meals, we got some hungry customers :D — taha, Oct 09 '17 at 15:14
wouldn't an array of objects be cleaner? i.e. `customerOrder = {meal:meal, starter:starter, main:main, dessert:dessert};`. Then it's simple `var mealTime = customerOrder.meal;` — Liam, Oct 09 '17 at 15:20

Serge K. · Accepted Answer · 2017-10-09T15:24:37.960

You can simply affect those variables using their indexes :

var totalOrder = [];

function CafeService(meal, starter, main, dessert) {
  var customerOrder = [meal, starter, main, dessert];
  totalOrder.push(customerOrder);
}

CafeService('1', 'Salad', 'Hamburger', 'Soda');
CafeService('1', 'Salad', 'Hamburger', 'Soda');
CafeService('1', 'Salad', 'Hamburger', 'Soda');

totalOrder.forEach(function (customerOrder) {
  var mealTime = customerOrder[0];
  var mealStarter = customerOrder[1];
  var mealMain = customerOrder[2];
  var mealDessert = customerOrder[3];
  
  console.log(mealTime, mealStarter, mealMain, mealDessert);
});

Or, if you use ES6 syntax, you can use destructuring assignment :

var totalOrder = [];

function CafeService(meal, starter, main, dessert) {
  var customerOrder = [meal, starter, main, dessert];
  totalOrder.push(customerOrder);
}

CafeService('1', 'Salad', 'Hamburger', 'Soda');
CafeService('1', 'Salad', 'Hamburger', 'Soda');
CafeService('1', 'Salad', 'Hamburger', 'Soda');

totalOrder.forEach(function (customerOrder) {
  var [mealTime, mealStarter, mealMain, mealDessert] = customerOrder;
  
  console.log(mealTime, mealStarter, mealMain, mealDessert);
});

Note I used .forEach instead of for...in for reasons; classic for-loop is also a valid option. You could use for...of with ES6.

score 1 · Answer 2 · answered Oct 09 '17 at 15:27

I would change your structure to use objects rather than arrays in arrays. You could even create a constructor function so:

var totalOrder = [];

function Order(meal, starter, main, dessert)
{
   this.meal = meal;
   this.starter = starter;
   this.main = main;
   this.dessert = dessert;
}

function CafeService(meal, starter, main, dessert){//takes value from text box input

   totalOrder.push(new Order(meal, starter, main, dessert)); 
}

accessing the properties is then very intuitive:

totalOrder.forEach(function (customerOrder) {
   customerOrder.meal;
   ...
}

score 1 · Answer 3 · answered Oct 09 '17 at 15:30

If I may make a small suggestion: store the meal components in an object rather than an array. Then you can simply access them by key. This will make your code much easier to read, especially if it gets larger because you won't need to remember how each index corresponds to the part of the meal. (ie. customerOrder[1] is a starter)

For example:

var totalOrder = []
function CafeService(meal, starter, main, dessert){//takes value from text box input
    var customerOrder = {
      meal:meal,
      starter: starter,
      main: main,
      dessert: dessert
    }
    totalOrder.push(customerOrder ); 
}

CafeService("Dinner", "soup", "roast duck", "cake")
CafeService("Dinner", "Salad", "t-bone", "pudding")
CafeService("Breakfast", "Fruit", "Omlette", "muffin")

// Now just access by key and your code is self-documenting
totalOrder.forEach(function(order){
  console.log(order.meal)
  console.log(order.starter)
  // etc.
})

score 0 · Answer 4 · answered Oct 09 '17 at 15:28

You could take an object for counting the wanted items.

function service(meal, starter, main, dessert) {
    totalOrder.push([meal, starter, main, dessert]);    
}

function getCount() {
    var count = { time: {}, starter: {}, main: {}, dessert: {} };
    totalOrder.forEach(function (a) {
        ['time', 'starter', 'main', 'dessert'].forEach(function (item, i) {
            if (a[i]) {
                count[item][a[i]] = (count[item][a[i]] || 0) + 1;
            }
        });
    });
    return count;
}

var totalOrder = [];

service('breakfast', 'coffee', 'toast', '');
service('breakfast', 'coffee', 'toast', 'apple');
service('lunch', 'soup', 'pizza', 'ice');
service('lunch', 'soup', 'pizza', 'cookie');
service('dinner', 'toast', 'spaghetti', 'banana');
service('dinner', '', 'pizza', 'banana');

console.log(getCount());

.as-console-wrapper { max-height: 100% !important; top: 0; }

JavaScript Foreach value in array to string

4 Answers4