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 }]

Pineda · Accepted Answer · 2017-04-19 22:56:23Z

2

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'; 
});

edited Apr 19, 2017 at 22:56

answered Apr 19, 2017 at 22:52

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Folky.H Over a year ago

Great catch! I don't know why I didn't see it! Thank you! +1

Pineda Over a year ago

Glad you found this helpful :)

Collectives™ on Stack Overflow

JavaScript - Child elements get duplicated while using a for loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related