使用JQuery从JSON获取数据到手风琴

Question

我想按颜色名称检索数据。这是数据

[{
  "0":{
     "colorId":"MINT (07MTS)",
     "child":[{
           "0":{
              "nama_warna":"MINT (07MTS)",
              "sales_order":"21-000617",
              "price_quotation_id":"13126",
              "number_p":"623289",
              "greige_roll":"1",
              "packing_roll":"1",
              "npb_roll":"0",
              "greige_kg":"17.45000",
              "packing_kg":null,
              "npb_kg":null,
              "gp_loss":"0",
              "pn_loss":"-1",
              "gp_percent":null,
              "sent_ratio":null,
              "unsent_qty":null
           },
           "1":{
              "nama_warna":"MINT (07MTS)",
              "sales_order":"21-000617",
              "price_quotation_id":"13126",
              "number_p":"623288",
              "greige_roll":"15",
              "packing_roll":"15",
              "npb_roll":"0",
              "greige_kg":"371.90000",
              "packing_kg":null,
              "npb_kg":null,
              "gp_loss":"0",
              "pn_loss":"-15",
              "gp_percent":null,
              "sent_ratio":null,
              "unsent_qty":null
           }
        }
     ]
  },
  "1":{
     "colorId":"L.CORAL (50COL)",
     "child":[{
           "0":{
              "nama_warna":"L.CORAL (50COL)",
              "sales_order":"21-000617",
              "price_quotation_id":"13126",
              "number_p":"622753",
              "greige_roll":"15",
              "packing_roll":"15",
              "npb_roll":"15",
              "greige_kg":"365.55000",
              "packing_kg":"327.02000",
              "npb_kg":"327.02000",
              "gp_loss":"0",
              "pn_loss":"0",
              "gp_percent":"10.5000000000",
              "sent_ratio":"100.0000000000",
              "unsent_qty":"0.00000"
           }
        }
     ]
  } }]

这是我的手风琴密码。我将json数据放入结果变量。

result.forEach((item, i) => {
      var html = `<div class="panel-heading">
                    <h4 class="panel-title">
                      <a class="accordion-toggle pull-left collapsed" data-toggle="collapse" href="#`+i+`">
                        <i class="ace-icon fa fa-angle-right bigger-110" data-icon-hide="fa-angle-down" data-icon-show="fa-angle-right"></i>
                        &nbsp;
                        `+item.colorId+`
                      </a>
                      <div class="clearfix"></div>
                    </h4>
                  </div>
                  <div class="panel-collapse collapse" id="`+i+`">
                    <div>
                      <table class="table table-striped table-bordered table-hover">
                        <thead>
                          <tr>
                            <th rowspan="2">Greige</th>
                            <th rowspan="2">Kartu P</th>
                            <th colspan="3" style="text-align: center">PCS</th>
                            <th colspan="3" style="text-align: center">Weight</th>
                            <th colspan="5" style="text-align: center">Statistic</th>
                          </tr>
                          <tr>
                            <th>Greige</th>
                            <th>Packing</th>
                            <th>NPB</th>
                            <th>Greige</th>
                            <th>Packing</th>
                            <th>NPB</th>
                            <th>G-P Loss pcs</th>
                            <th>P-N Loss pcs</th>
                            <th>G-P Loss %</th>
                            <th>Sent Ratio</th>
                            <th>Unsent QTY</th>
                          </tr>
                        </thead>
                          <tbody id="body-so"></tbody>`;

      item.child.forEach(val => {
        $("#body-so").append(`
                        <tr>
                          <td>`+val.sales_order+`</td>
                          <td>`+val.number_p+`</td>
                          <td>`+(val.greige_roll === null ? 0 : val.greige_roll )+`</td>
                          <td>`+(val.packing_roll === null ? 0 : val.packing_roll )+`</td>
                          <td>`+(val.npb_roll === null ? 0 : val.npb_roll )+`</td>
                          <td>`+(val.greige_kg === null ? 0 : round(val.greige_kg, 2) )+`</td>
                          <td>`+(val.packing_kg === null ? 0 : round(val.packing_kg, 2) )+`</td>
                          <td>`+(val.npb_kg === null ? 0 : round(val.npb_kg, 2) ) +`</td>
                          <td>`+(val.gp_loss === null ? 0 : val.gp_loss )+`</td>
                          <td>`+(val.pn_loss === null ? 0 : val.pn_loss )+`</td>
                          <td>`+(val.gp_percent === null ? 0 : round(val.gp_percent, 2) )+` %</td>
                          <td>`+(val.sent_ratio === null ? 0 : round(val.sent_ratio, 2) )+` %</td>
                          <td>`+(val.unsent_qty === null ? 0 : round(val.unsent_qty, 2) )+`</td>
                        </tr>
                      `);
      });

      html += `</table>
              </div>
            </div></div>`;

      $("#accordion").append(html);
    });

数据全部在一个颜色名称中显示出来，但我希望根据颜色名称追加数据。我已经添加了基于颜色名称的foreach，但是嵌套的forEach循环不起作用。谢谢

Answer 1

如果您查看“结果”的数据结构，您会很快发现问题。

遍历“结果”的结果是一个包含所有数据的对象，而不是您认为的“Item”对象。同样，“子”的遍历也有同样的问题。

此外，如果需要遍历对象，则需要使用for-in遍历。

图片