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!
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>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>