嵌套的forEach不適用于附加HTML

嵌套的 forEach() 不適用于附加 HTML。

資料可以正常輸入，console但不能通過附加 HTML 正確顯示。

我的代碼：-

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>

感謝你付出的努力！

uj5u.com熱心網友回復：

您只需.forEach()將以下內容插入到字串中.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 >
     <h4>${val.salon_name}</h4>
     <div >
       ${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>

uj5u.com熱心網友回復：

我找到了解決此問題的更好方法：-

更新代碼：-

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

標籤：javascript jQuery

上一篇：如何在asp.netrazor頁面中捕獲ajax發送的資料？

下一篇：使用Mutablelivedata從DialogFragmentColorPicker更改片段的背景顏色不起作用