nested forEach not working with append HTML

Question

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(`
                    
                    ${val.salon_name}
                    
                    
                    
                        `)

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

Thank you for your efforts!

user_2813224 · Answer

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(`
   
     ${val.salon_name}
     
       ${val.services.discounted_price} 
     
   `)
});

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

user_7333403 · Answer

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(`
     
     ${val.salon_name}
     
     ${serviceWrapper}               
     
     
     `)
  });

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

nested forEach not working with append HTML

2 Answers