Barmar的回复列表

您使用的是相同的迭代变量 i 和 v 两者都有 $.each 循环。所以当你循环的时候 alphabet , base[i] 在中使用索引 字母表 ,而不是中的索引 base . 你应该使用不同的变量。

正如我在注释中提到的,您不需要索引数组,这是整个使用点 每一美元 --回调参数是数组的当前元素。所以只需使用比 V 在每个数组中。

let base = [
  { 'id': 'base1', 'btn': 'b1-include', "name": "baseone" },
  { 'id': 'base2', 'btn': 'b2-include', "name": "basetwo" },
  { 'id': 'base3', 'btn': 'b3-include', "name": "basethree" },
  { 'id': 'base4', 'btn': 'b4-include', "name": "basefour" },
  { 'id': 'base5', 'btn': 'b5-include', "name": "basefive" },
  { 'id': 'base6', 'btn': 'b6-include', "name": "basesix" },
  { 'id': 'base7', 'btn': 'b7-include', "name": "baseseven" },
  { 'id': 'base8', 'btn': 'b8-include', "name": "baseeight" },
  { 'id': 'base9', 'btn': 'b9-include', "name": "basenine" },
  { 'id': 'base10', 'btn': 'b10-include', "name": "baseten" },
  { 'id': 'base11', 'btn': 'b11-include', "name": "baseeleven" },
  { 'id': 'base12', 'btn': 'b12-include', "name": "basetwelve" },
  { 'id': 'base13', 'btn': 'b13-include', "name": "basethirteen" },
  { 'id': 'base14', 'btn': 'b14-include', "name": "basefourteen" },
  { 'id': 'base15', 'btn': 'b15-include', "name": "basefifteen" },
];

let alphabet = [
  { "id":"A", "url":"https://example.com/A.png" },
  { "id":"B", "url":"https://example.com/B.png" },
  { "id":"C", "url":"https://example.com/C.png" }
];

let preview = $('.preview');


$.each(base, function(i, cur_base) {
  let $collapse = $('<div>', {'class': 'collapse', id: cur_base.id});
  let $btn = $('<a>', {'href': '#', 'class': 'btn btn-sm btn-primary', id: cur_base.btn});
  let $letters = $('<div>', {'class': 'letters'});

  $btn.text(cur_base.btn);
  preview.append($collapse);
  $btn.on('click', function() {
    if($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0);
      setOpacity(cur_base.name, 0.2);
    } else {
      $(this).attr('data-click-state', 1);
      setOpacity(cur_base.name, 1);
    }
  });
  $collapse.append($btn);
  $collapse.append($letters);

  $.each(alphabet, function (i, letter) {
    let $href = $("<a>", {id: letter.id, "class": "btn btn-sm btn-dark", 'href': '#', 'title': letter.id, 'data-src': letter.url, 'data-base': cur_base.id});
    $href.text(letter.id);
    $href.on('click', function(){
      console.log(letter.id + ' has been clicked on ' + cur_base.id);
      setMaterialUIDPending (cur_base.name, AlbedoPBR, letter.id+"-letter");
      addTexture(letter.url, 'N-letter', true);
    });
    $letters.append($href);
  });

});

.preview ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.preview ul li {
  flex: 1 0 25%;
  margin: 5px;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="preview">
  <ul>
    <li id="b1"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base1" role="button" aria-expanded="false" aria-controls="base1">Base 1</a></li>
    <li id="b2"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base2" role="button" aria-expanded="false" aria-controls="base2">Base 2</a></li>
    <li id="b3"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base3" role="button" aria-expanded="false" aria-controls="base3">Base 3</a></li>
    <li id="b4"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base4" role="button" aria-expanded="false" aria-controls="base4">Base 4</a></li>
    <li id="b5"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base5" role="button" aria-expanded="false" aria-controls="base5">Base 5</a></li>
    <li id="b6"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base6" role="button" aria-expanded="false" aria-controls="base5">Base 6</a></li>
    <li id="b7"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base7" role="button" aria-expanded="false" aria-controls="base5">Base 7</a></li>
    <li id="b8"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base8" role="button" aria-expanded="false" aria-controls="base8">Base 8</a></li>
    <li id="b9"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base9" role="button" aria-expanded="false" aria-controls="base9">Base 9</a></li>
    <li id="b10"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base10" role="button" aria-expanded="false" aria-controls="base10">Base 10</a></li>
    <li id="b11"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base11" role="button" aria-expanded="false" aria-controls="base11">Base 11</a></li>
    <li id="b12"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base12" role="button" aria-expanded="false" aria-controls="base12">Base 12</a></li>
    <li id="b13"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base13" role="button" aria-expanded="false" aria-controls="base13">Base 13</a></li>
    <li id="b14"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base14" role="button" aria-expanded="false" aria-controls="base14">Base 14</a></li>
    <li id="b15"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base15" role="button" aria-expanded="false" aria-controls="base15">Base 15</a></li>
  </ul>
</div>

因为要添加到的数组是嵌套的,所以需要在第一次遇到具有该订单号的行时创建父对象。为此,可以使用关联数组,以便于判断对象是否已经存在。

然后添加到嵌套数组中,并使用 itemName 关键。

while ( $row = $result->fetch_assoc())  {
    $orderno = $row['WebOrderNumber_C'];
    if (!isset($orders[$orderno])) {
        $orders[$orderno] = [
            "WebOrderNumber_C" => $orderno,
            "shipAddress" => [
                "add1" => $row["add1"],
                // other fields here ...
            ],
            "items" => []
        ];
    }
    $orders[$orderno]]["items"][] = ["itemName" => $row['itemName']];
}
$orders = array_values($orders); // Convert from associative array to indexed
echo json_encode($orders, JSON_PRETTY_PRINT);