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 >
                    <h4>${val.salon_name}</a></h4>
                    <div >
                    </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!

CodePudding user response：

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

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

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 >
     <h4>${val.salon_name}</h4>
     <div >
       ${val.services[0].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>

CodePudding user response：

All you need to do is run that script once DOM is loaded. There is no issue with forEach or any other part of script.

window.addEventListener('DOMContentLoaded', function () {
    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 >
                          <h4>${val.salon_name}</a></h4>
                          <div >
                          </div>
                          </div>
                              `)

        val.services.forEach(serviceVal => {

            $(`#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>

Before fetching or updating any node from document you have to make sure it 's dom loaded. And then try adding, updating or deleting node.