顯示所選選項的數組值

Question

我試圖從包含id和sku號的數組中回顯一個值。 我需要回顯所選div的sku號。

下面是一個選定的div，它顯示了data-option-type-id

<div class="mageworx-swatch-option text selected" data-option-id="13111" data-option-type-id="166748" data-option-label="3/4" data-option-price="145" style=" max-width: 90px;">3/4"</div>

這是我當前的代碼，該代碼從php數組中獲取id和sku並發送至javascript：

<?php
$_product = $block->getProduct();
foreach ($_product->getOptions() as $o) {
    foreach ($o->getValues() as $value) {
        $result[]=array(
        "itemoption_id" => $value["option_type_id"],
        "itemsku" => $value["sku"]
        );

    }
}
echo json_encode($result);
   ?>
<script type="text/javascript">
// pass PHP variable declared above to JavaScript variable
var result = <?php echo json_encode($result) ?>;
var json = JSON.stringify(result);
document.write(json);
</script>

我的想法現在碰到了牆（對此非常陌生），任何幫助將不勝感激。

我正在考慮使用javascript if命令來查看是否選擇了div並匹配該data-option-type-id以查找和顯示sku。

我想我在那里需要一些ajax嗎？

有人可以指出正確的方向或提供任何建議嗎？

非常感謝

Answer 1

我建議使用項目ID作為鍵，使result成為JavaScript對象而不是數組。

<?php
$_product = $block->getProduct();
foreach ($_product->getOptions() as $o) {
    foreach ($o->getValues() as $value) {
        $result[$value["option_type_id"]]=value["sku"];
    }
}
?>
<script type="text/javascript">
// pass PHP variable declared above to JavaScript variable
var sku_data = <?php echo json_encode($result) ?>;
</script>

您可以輕松查找SKU

function get_sku(selected_div) {
    var item_id = selected_div.dataset.optionTypeId; // value of data-option-type-id
    var sku = sku_data[item_id];
    return sku;
}

function show_selected_sku() {
  var selected = document.querySelector(".selected");
  if (selected) {
    let sku = get_sku(selected);
    console.log(sku);
  }
}

Answer 2

我不知道您的HTML結構，但可以肯定的是，如果您要使用JSON對象，則需要使用

 var json = JSON.parse(result);

代替

 var json = JSON.stringify(result);

parse將字符串轉換為JSON，而stringify執行相反的操作