'nested forEach not working with append HTML

Nested forEach() not working with append HTML.

Data is coming properly fine in console but not properly displaying with append HTML.

My Code:-

data = {
  result: [
    {
      id: 8,
      salon_name: "salon one",
      services: [
        {
          id: 1,
          name: "Hair Cut",
          type: "Hair Styling",
          category: "ladies",
          mrp_price: 500,
          discounted_price: 450
        }
      ]
    },
    {
      id: 119,
      salon_name: "salon two",
      services: [
        {
          id: 1,
          name: "Hair Cut",
          type: "Hair Styling",
          category: "ladies",
          mrp_price: 600,
          discounted_price: 500
        }
      ]
    },
    {
      id: 125,
      salon_name: "salon three",
      services: [
        {
          id: 1,
          name: "Hair Cut",
          type: "Hair Styling",
          category: "ladies",
          mrp_price: 0,
          discounted_price: 90
        }
      ]
    }
  ],
  message: "success"
}


data.result.forEach(val =>{

 $('#serviceData').append(`
                    <div class="service-wrapper">
                    <h4>${val.salon_name}</a></h4>
                    <div class="service-wrapper-body">
                    </div>
                    </div>
                        `)

val.services.forEach(serviceVal => {
console.log(serviceVal.discounted_price);
 $(`#serviceData .service-wrapper-body`).append(serviceVal.discounted_price);
})


})

.service-wrapper{ border:1px solid #ccc; margin-bottom:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="serviceData"></div>

Thank you for your efforts!

javascript jquery

Solution 1:^[1]

You just need one .forEach() interpolate the following into the string in the .service-wrapper-body:

`${val.services[0].discounted_price}`

const data = {
  result: [{
      id: 8,
      salon_name: "salon one",
      services: [{
        id: 1,
        name: "Hair Cut",
        type: "Hair Styling",
        category: "ladies",
        mrp_price: 500,
        discounted_price: 450
      }]
    },
    {
      id: 119,
      salon_name: "salon two",
      services: [{
        id: 1,
        name: "Hair Cut",
        type: "Hair Styling",
        category: "ladies",
        mrp_price: 600,
        discounted_price: 500
      }]
    },
    {
      id: 125,
      salon_name: "salon three",
      services: [{
        id: 1,
        name: "Hair Cut",
        type: "Hair Styling",
        category: "ladies",
        mrp_price: 0,
        discounted_price: 90
      }]
    }
  ],
  message: "success"
}

let mod = data.result.flatMap(obj => obj.services.flat());

data.result.forEach((obj, idx) => {
  delete obj.services;
  obj.services = mod[idx];
});

data.result.forEach(val => {
  $('#serviceData').append(`
   <div class="service-wrapper">
     <h4>${val.salon_name}</h4>
     <div class="service-wrapper-body">
       ${val.services.discounted_price} 
     </div>
   </div>`)
});

.service-wrapper {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

<div id="serviceData"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution 2:^[2]

I found better way to solve this issue:-

Updated Code:-

data = {
    result: [
      {
        id: 8,
        salon_name: "salon one",
        services: [
          {
            id: 1,
            name: "Hair Cut",
            type: "Hair Styling",
            category: "ladies",
            mrp_price: 500,
            discounted_price: 450
          }
        ]
      },
      {
        id: 119,
        salon_name: "salon two",
        services: [
          {
            id: 1,
            name: "Hair Cut",
            type: "Hair Styling",
            category: "ladies",
            mrp_price: 600,
            discounted_price: 500
          }
        ]
      },
      {
        id: 125,
        salon_name: "salon three",
        services: [
          {
            id: 1,
            name: "Hair Cut",
            type: "Hair Styling",
            category: "ladies",
            mrp_price: 0,
            discounted_price: 90
          }
        ]
      }
    ],
    message: "success"
  }

  data.result.forEach(val => {
    var serviceWrapper = '';
    val.services.forEach(serviceVal => {
      serviceWrapper += serviceVal.discounted_price
    });

    $('#serviceData').append(`
     <div class="service-wrapper">
     <h4>${val.salon_name}</a></h4>
     <div class="service-wrapper-body">
     ${serviceWrapper}               
     </div>
     </div>
     `)
  });

.service-wrapper {
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="serviceData"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Rohit Verma

'nested forEach not working with append HTML

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]