JavaScript - Child elements get duplicated while using a for loop

Question

The Problem:

I am willing to get a child element called optionName (you may have a look at the JSON array below to have a clearer idea on what's happening), which requires from me a nested for loop in order to get it. So far, I can get; however, the issue appears when I try to assign the value of that child element to a variable (line 5 in the code section), while I am doing the following additions += i.optionName which makes the value of i.optionName to be ordered (one after the other, similar to an array), the child elements get accumulated which makes the following appear:

 Meal : Big Mac
 Options : 
 Normal Ou Maxi ? : Maxi
 Choix du boisson : Fanta Orange
 Choix des frites : Frites steak house
 Category : Menus
 Qty : 1
 Price : 49

 Meal : Chicken McNuggets X6
 Options : 
 //The first block is repeated again which is normal as I used additions +=**
 Normal OR Big ? : Big
 Choix du boisson : Fanta Orange
 Choix des frites : Steak house

 Normal OR Big ? : Normal
 Choix du boisson : Sprite
 Choix des frites : Steak house**
 Category : Menus
 Qty : 1
 Price : 45

In short it's getting worse as much as the parent elements are more than that. You may say why I am doing that, the answer is because the below variable dishes it needs to be a string in this special case!

The current code:

    let dishes = '';
    let additions = '';

    var msg =  MessageContent.orderedDishes.forEach(function(element) {
      for(var i of element.selectedAdditions){
       additions += i.optionName +
       ' : '
       + i.Name + '\n';
    }

    dishes +=
       'Meal : ' + element.dishName + '\n' +
       'Options : \n' + additions + '\n' +
       'Category : ' +  element.categoryName + '\n' +
       'Qty : ' + element.qty+ '\n' +
       'Price : ' + element.price + '\n\n';
});

Here is the JSON array I am trying to iterate through:

[{
"objectId": "Kakao0MiRE",
"price": 49,
"dishName": "Big Mac",
"categoryName": "Menus",
"selectedAdditions": [{
    "optionName": "Normal Ou Big ?",
    "Name": "Big",
    "Price": 5
}, {
    "optionName": "Drink",
    "Name": "Fanta Orange",
    "Price": 0
}, {
    "optionName": "Fries",
    "Name": "Steak house",
    "Price": 0
}],
"additionalPrice": 5,
"qty": 1
}, {
 "objectId": "kOP90Ld8b9",
 "price": 45,
 "dishName": "Chicken McNuggets X6",
 "categoryName": "Menus",
 "selectedAdditions": [{
    "optionName": "Normal Ou Maxi ?",
    "Name": "Normal",
    "Price": 0
}, {
    "optionName": "Drink",
    "Name": "Sprite",
    "Price": 0
}, {
    "optionName": "Fries",
    "Name": "Frites steak house",
    "Price": 0
}],
 "additionalPrice": 0,
 "qty": 1 }]

Answer 1

Your additions variable is defined declared outside of the call to forEach.

When forEach iterates, you concatenate values to the existing value of additions but never reset it to an empty string for each iteration. This is why your data builds up.

You can resolve this by setting the value of additions to an empty string at the beginning of your forEach callback, or by declaring it inside the forEach so that it starts with an empty array for each iteration. I'd suggest the latter:

let dishes = ''; 

var msg = MessageContent.orderedDishes.forEach(function(element) { 
  // declaring your variable here ensures that
  // it is empty at the beginning of the iteration
  // rather than accumulating over all of them:
  let additions = ''; 
  for(var i of element.selectedAdditions){ 
    additions += i.optionName + ' : ' + i.Name + '\n';
  } 
  dishes += 'Meal : ' + element.dishName + '\n'
    + 'Options : \n' + additions + '\n' 
    + 'Category : ' + element.categoryName + '\n'
    + 'Qty : ' + element.qty+ '\n' 
    + 'Price : ' + element.price + '\n\n'; 
});