CODEWITHSUNDEEP
javascriptjquery
Rohit Verma
Rohit Verma

Reputation: 3783

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!

Upvotes: 1

Views: 78

Answers (2)

Rohit Verma
Rohit Verma

Reputation: 3783

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>

Upvotes: 0

zer00ne
zer00ne

Reputation: 44108

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>

Upvotes: 2

Related Questions