ForEach() anidado no funciona con agregar HTML.
Los datos llegan correctamente a la console pero no se muestran correctamente con HTML adjunto.
Mi código:-
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>¡Gracias por tus esfuerzos!
Solo necesita un .forEach() para interpolar lo siguiente en la cadena en el .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>Encontré una mejor manera de resolver este problema: -
Código actualizado: -
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>