操作HTML從JSON檔案中獲取資料并重寫DOM-有解無憂

我的 HTML 中有多個鏈接，如下所示：

<a class="wrapper" href="javascript:FindSKU('12345')" target="_blank">TEST</a>

如何在 JSON 檔案中找到數字，回傳第二個值，然后href用這個值替換屬性中的所有內容。

我的 JSON 檔案如下所示：

{
    "12345": "/test1",
    "1664": "/test2",
    "1664T": "/test3",
    "1666": null,
    "1726": "/test4",
}

但是我可以將其更改為我需要的任何內容。

我到目前為止的嘗試：

var findATnR = $("a.wrapper ").a(function('FindSKU') {
    return $(this).attr('href').replace("javascript:FindSKU('", '').replace("');", '');
}).get();

var unique = JSON.stringify(findATnR.filter(uniqueArray).sort());

$.get("Traxxas/traxxas.json", function(data) {
    $.each(data, function(artNr, sUrl) {
        console.log('art:'   artNr   ', url:'   sUrl);
        if (sUrl === null) {
            $('a.wrapper [href*="'   "'"   artNr   "'"   '"]')
        } else {
            $('a.wrapper [href*="'   "'"   artNr   "'"   '"]')
                .attr('href', sUrl)
                .attr('target', '_blank');
        }
    });
});

我得到：Uncaught SyntaxError: Unexpected string在第一行之后。

uj5u.com熱心網友回復：

不要嘗試在 HTML 屬性中操作 Javascript，而是使用資料屬性和 JS 事件處理程式。

function findSKU(sku){
  console.log(`Do something with SKU: ${sku}`);
}

$(document).on('click', 'a.wrapper[data-sku]', function(e){
  e.preventDefault();
  
  // Get the SKU
  var sku = $(this).data('sku');
  
  // Call your SKU function
  findSKU(sku);
  
  // And here's how you change the SKU...
  // This is just a random number but you can get the number form your JSON...
  var new_sku = Math.floor(Math.random() * (99999 - 10000)   10000);
  $(this).data('sku', new_sku);
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="wrapper" href="#" data-sku='12345' target="_blank">TEST</a>

uj5u.com熱心網友回復：

所以我讓它作業了！關閉 :D

問題：

所有 Href 始終只是來自 json 檔案的最后一個資料集。

（我的錯誤在哪里？）

但是控制臺日志是正確的！

 $.get("https://www.outrun-team.de/test.json", function(data) {
        $.each(data, function(artNr, sUrl) {
             console.log('SKU:'   artNr   ', url:'   sUrl);

日志：

SKU:2890X, url:2890X just a test
SKU:2889X, url:2889X just a test
SKU:3433X, url:3433X just a test
SKU:8715X, url:8715X just a test
SKU:8716X, url:8716X just a test
SKU:2968X, url:2968X just a test

結果：

<a class="wrapper" data-sku="7885" target="_blank" href="2968X just a test">test for 7885</a><br>
<a class="wrapper" data-sku="2085X" target="_blank" href="2968X just a test">test for 2085X</a><br>
<a class="wrapper" data-sku="6511" target="_blank" href="2968X just a test">test for 6511</a><br>
<a class="wrapper" data-sku="6550X" target="_blank" href="2968X just a test">test for 6550X</a><br>
<a class="wrapper" data-sku="6551X" target="_blank" href="2968X just a test">test for 6551X</a><br>
<a class="wrapper" data-sku="7710" target="_blank" href="2968X just a test">test for 7710</a><br>
<a class="wrapper" data-sku="7711" target="_blank" href="2968X just a test">test for 7711</a><br>

這是我的測驗代碼：

<a class="wrapper" data-sku="7885" target="_blank">test for 7885</a><br />
<a class="wrapper" data-sku="2085X" target="_blank">test for 2085X</a><br />
<a class="wrapper" data-sku="6511" target="_blank">test for 6511</a><br />
<a class="wrapper" data-sku="6550X" target="_blank">test for 6550X</a><br />
<a class="wrapper" data-sku="6551X" target="_blank">test for 6551X</a><br />
<a class="wrapper" data-sku="7710" target="_blank">test for 7710</a><br />
<a class="wrapper" data-sku="7711" target="_blank">test for 7711</a><br />
<a class="wrapper" data-sku="7811G" target="_blank">test for 7811G</a><br />
<a class="wrapper" data-sku="7811R" target="_blank">test for 7811R</a><br />
<a class="wrapper" data-sku="7811" target="_blank">test for 7811</a><br />
<a class="wrapper" data-sku="7711T" target="_blank">test for 7711T</a><br />
<a class="wrapper" data-sku="7711X" target="_blank">test for 7711X</a><br />
<a class="wrapper" data-sku="7713X" target="_blank">test for 7713X</a><br />
<a class="wrapper" data-sku="7817" target="_blank">test for 7817</a><br />
<a class="wrapper" data-sku="7817A" target="_blank">test for 7817A</a><br />
<a class="wrapper" data-sku="7817G" target="_blank">test for 7817G</a><br />
<a class="wrapper" data-sku="7817R" target="_blank">test for 7817R</a><br />
<a class="wrapper" data-sku="7817T" target="_blank">test for 7817T</a><br />
<a class="wrapper" data-sku="7817X" target="_blank">test for 7817X</a><br />
<a class="wrapper" data-sku="7895" target="_blank">test for 7895</a><br />
<a class="wrapper" data-sku="7895R" target="_blank">test for 7895R</a><br />
<a class="wrapper" data-sku="7897A" target="_blank">test for 7897A</a><br />
<a class="wrapper" data-sku="7897G" target="_blank">test for 7897G</a><br />
<a class="wrapper" data-sku="7897R" target="_blank">test for 7897R</a><br />
<a class="wrapper" data-sku="7897X" target="_blank">test for 7897X</a><br />
<a class="wrapper" data-sku="7829" target="_blank">test for 7829</a><br />
<a class="wrapper" data-sku="7829A" target="_blank">test for 7829A</a><br />
<a class="wrapper" data-sku="7829G" target="_blank">test for 7829G</a><br />
<a class="wrapper" data-sku="7829R" target="_blank">test for 7829R</a><br />
<a class="wrapper" data-sku="7829T" target="_blank">test for 7829T</a><br />
<a class="wrapper" data-sku="7829X" target="_blank">test for 7829X</a><br />
<a class="wrapper" data-sku="7830" target="_blank">test for 7830</a><br />
<a class="wrapper" data-sku="7830A" target="_blank">test for 7830A</a><br />
<a class="wrapper" data-sku="7830G" target="_blank">test for 7830G</a><br />
<a class="wrapper" data-sku="7830R" target="_blank">test for 7830R</a><br />
<a class="wrapper" data-sku="7830T" target="_blank">test for 7830T</a><br />
<a class="wrapper" data-sku="7830X" target="_blank">test for 7830X</a><br />
<a class="wrapper" data-sku="7831" target="_blank">test for 7831</a><br />
<a class="wrapper" data-sku="7831A" target="_blank">test for 7831A</a><br />
<a class="wrapper" data-sku="7831G" target="_blank">test for 7831G</a><br />
<a class="wrapper" data-sku="7831R" target="_blank">test for 7831R</a><br />
<a class="wrapper" data-sku="7831T" target="_blank">test for 7831T</a><br />
<a class="wrapper" data-sku="7831X" target="_blank">test for 7831X</a><br />
<a class="wrapper" data-sku="7761" target="_blank">test for 7761</a><br />
<a class="wrapper" data-sku="7764A" target="_blank">test for 7764A</a><br />
<a class="wrapper" data-sku="7767" target="_blank">test for 7767</a><br />
<a class="wrapper" data-sku="7765" target="_blank">test for 7765</a><br />
<a class="wrapper" data-sku="7761A" target="_blank">test for 7761A</a><br />
<a class="wrapper" data-sku="7764X" target="_blank">test for 7764X</a><br />
<a class="wrapper" data-sku="7767X" target="_blank">test for 7767X</a><br />
<a class="wrapper" data-sku="7765X" target="_blank">test for 7765X</a><br />
<a class="wrapper" data-sku="7761G" target="_blank">test for 7761G</a><br />
<a class="wrapper" data-sku="7764G" target="_blank">test for 7764G</a><br />
<a class="wrapper" data-sku="7767G" target="_blank">test for 7767G</a><br />
<a class="wrapper" data-sku="7765G" target="_blank">test for 7765G</a><br />
<a class="wrapper" data-sku="7761R" target="_blank">test for 7761R</a><br />
<a class="wrapper" data-sku="7764R" target="_blank">test for 7764R</a><br />
<a class="wrapper" data-sku="7767R" target="_blank">test for 7767R</a><br />
<a class="wrapper" data-sku="7765R" target="_blank">test for 7765R</a><br />
<a class="wrapper" data-sku="7761T" target="_blank">test for 7761T</a><br />
<a class="wrapper" data-sku="7765T" target="_blank">test for 7765T</a><br />
<a class="wrapper" data-sku="7763T" target="_blank">test for 7763T</a><br />
<a class="wrapper" data-sku="7748G" target="_blank">test for 7748G</a><br />
<a class="wrapper" data-sku="7748R" target="_blank">test for 7748R</a><br />
<a class="wrapper" data-sku="7748X" target="_blank">test for 7748X</a><br />
<a class="wrapper" data-sku="7768" target="_blank">test for 7768</a><br />
<a class="wrapper" data-sku="7768A" target="_blank">test for 7768A</a><br />
<a class="wrapper" data-sku="7768G" target="_blank">test for 7768G</a><br />
<a class="wrapper" data-sku="7768R" target="_blank">test for 7768R</a><br />
<a class="wrapper" data-sku="7768T" target="_blank">test for 7768T</a><br />
<a class="wrapper" data-sku="7759" target="_blank">test for 7759</a><br />
<a class="wrapper" data-sku="7759G" target="_blank">test for 7759G</a><br />
<a class="wrapper" data-sku="7759R" target="_blank">test for 7759R</a><br />
<a class="wrapper" data-sku="6447R" target="_blank">test for 6447R</a><br />
<a class="wrapper" data-sku="6449R" target="_blank">test for 6449R</a><br />
<a class="wrapper" data-sku="6448R" target="_blank">test for 6448R</a><br />
<a class="wrapper" data-sku="7772T" target="_blank">test for 7772T</a><br />
<a class="wrapper" data-sku="7772G" target="_blank">test for 7772G</a><br />
<a class="wrapper" data-sku="7772R" target="_blank">test for 7772R</a><br />
<a class="wrapper" data-sku="7772A" target="_blank">test for 7772A</a><br />
<a class="wrapper" data-sku="7773" target="_blank">test for 7773</a><br />
<a class="wrapper" data-sku="7756G" target="_blank">test for 7756G</a><br />
<a class="wrapper" data-sku="7756R" target="_blank">test for 7756R</a><br />
<a class="wrapper" data-sku="7756X" target="_blank">test for 7756X</a><br />
<a class="wrapper" data-sku="7758" target="_blank">test for 7758</a><br />
<a class="wrapper" data-sku="7758A" target="_blank">test for 7758A</a><br />
<a class="wrapper" data-sku="7758G" target="_blank">test for 7758G</a><br />
<a class="wrapper" data-sku="7758R" target="_blank">test for 7758R</a><br />
<a class="wrapper" data-sku="2997" target="_blank">test for 2997</a><br />
<a class="wrapper" data-sku="2973" target="_blank">test for 2973</a><br />
<a class="wrapper" data-sku="2981" target="_blank">test for 2981</a><br />
<a class="wrapper" data-sku="2890X" target="_blank">test for 2890X</a><br />
<a class="wrapper" data-sku="2889X" target="_blank">test for 2889X</a><br />
<a class="wrapper" data-sku="8710" target="_blank">test for 8710</a><br />
<a class="wrapper" data-sku="8711" target="_blank">test for 8711</a><br />
<a class="wrapper" data-sku="8712" target="_blank">test for 8712</a><br />
<a class="wrapper" data-sku="8719" target="_blank">test for 8719</a><br />
<a class="wrapper" data-sku="3415" target="_blank">test for 3415</a><br />
<a class="wrapper" data-sku="3433X" target="_blank">test for 3433X</a><br />
<a class="wrapper" data-sku="3433" target="_blank">test for 3433</a><br />
<a class="wrapper" data-sku="3437" target="_blank">test for 3437</a><br />
<a class="wrapper" data-sku="3431" target="_blank">test for 3431</a><br />
<a class="wrapper" data-sku="3432" target="_blank">test for 3432</a><br />
<a class="wrapper" data-sku="3437" target="_blank">test for 3437</a><br />
<a class="wrapper" data-sku="8715X" target="_blank">test for 8715X</a><br />
<a class="wrapper" data-sku="8716X" target="_blank">test for 8716X</a><br />
<a class="wrapper" data-sku="8715" target="_blank">test for 8715</a><br />
<a class="wrapper" data-sku="8716" target="_blank">test for 8716</a><br />
<a class="wrapper" data-sku="8722" target="_blank">test for 8722</a><br />
<a class="wrapper" data-sku="2968X" target="_blank">test for 2968X</a><br />
<script>
  
  function uniqueArray(value, index, self) {
    return self.indexOf(value) === index;
}
  
    var mapArtikelNr = function (){$('a.wrapper[data-sku]').attr('data-sku')};
console.log('mapArtikelNr:'   mapArtikelNr );
var unique = JSON.stringify(mapArtikelNr(uniqueArray));

$.get("https://www.outrun-team.de/test.json", function(data) {
    $.each(data, function(artNr, sUrl) {
         console.log('SKU:'   artNr   ', url:'   sUrl);
        if (sUrl === null) {
            $('a.wrapper[data-sku]')//.removeAttr('data-sku');
        } else {
            $('a.wrapper[data-sku]').attr('href', sUrl).attr('target', '_blank');
        }
    });
});

</script>

這是json

{
"7885": "7885 just a test",
"2085X": "2085X just a test",
"6511": "6511 just a test",
"6550X": "6550X just a test",
"6551X": "6551X just a test",
"7710": "7710 just a test",
"7711": "7711 just a test",
"7811G": "7811G just a test",
"7811R": "7811R just a test",
"7811": "7811 just a test",
"7711T": "7711T just a test",
"7711X": "7711X just a test",
"7713X": "7713X just a test",
"7817": "7817 just a test",
"7817A": "7817A just a test",
"7817G": "7817G just a test",
"7817R": "7817R just a test",
"7817T": "7817T just a test",
"7817X": "7817X just a test",
"7895": "7895 just a test",
"7895R": "7895R just a test",
"7897A": "7897A just a test",
"7897G": "7897G just a test",
"7897R": "7897R just a test",
"7897X": "7897X just a test",
"7829": "7829 just a test",
"7829A": "7829A just a test",
"7829G": "7829G just a test",
"7829R": "7829R just a test",
"7829T": "7829T just a test",
"7829X": "7829X just a test",
"7830": "7830 just a test",
"7830A": "7830A just a test",
"7830G": "7830G just a test",
"7830R": "7830R just a test",
"7830T": "7830T just a test",
"7830X": "7830X just a test",
"7831": "7831 just a test",
"7831A": "7831A just a test",
"7831G": "7831G just a test",
"7831R": "7831R just a test",
"7831T": "7831T just a test",
"7831X": "7831X just a test",
"7761": "7761 just a test",
"7764A": "7764A just a test",
"7767": "7767 just a test",
"7765": "7765 just a test",
"7761A": "7761A just a test",
"7764X": "7764X just a test",
"7767X": "7767X just a test",
"7765X": "7765X just a test",
"7761G": "7761G just a test",
"7764G": "7764G just a test",
"7767G": "7767G just a test",
"7765G": "7765G just a test",
"7761R": "7761R just a test",
"7764R": "7764R just a test",
"7767R": "7767R just a test",
"7765R": "7765R just a test",
"7761T": "7761T just a test",
"7765T": "7765T just a test",
"7763T": "7763T just a test",
"7748G": "7748G just a test",
"7748R": "7748R just a test",
"7748X": "7748X just a test",
"7768": "7768 just a test",
"7768A": "7768A just a test",
"7768G": "7768G just a test",
"7768R": "7768R just a test",
"7768T": "7768T just a test",
"7759": "7759 just a test",
"7759G": "7759G just a test",
"7759R": "7759R just a test",
"6447R": "6447R just a test",
"6449R": "6449R just a test",
"6448R": "6448R just a test",
"7772T": "7772T just a test",
"7772G": "7772G just a test",
"7772R": "7772R just a test",
"7772A": "7772A just a test",
"7773": "7773 just a test",
"7756G": "7756G just a test",
"7756R": "7756R just a test",
"7756X": "7756X just a test",
"7758": "7758 just a test",
"7758A": "7758A just a test",
"7758G": "7758G just a test",
"7758R": "7758R just a test",
"2997": "2997 just a test",
"2973": "2973 just a test",
"2981": "2981 just a test",
"2890X": "2890X just a test",
"2889X": "2889X just a test",
"8710": "8710 just a test",
"8711": "8711 just a test",
"8712": "8712 just a test",
"8719": "8719 just a test",
"3415": "3415 just a test",
"3433X": "3433X just a test",
"3433": "3433 just a test",
"3437": "3437 just a test",
"3431": "3431 just a test",
"3432": "3432 just a test",
"3437": "3437 just a test",
"8715X": "8715X just a test",
"8716X": "8716X just a test",
"8715": "8715 just a test",
"8716": "8716 just a test",
"8722": "8722 just a test",
"2968X": "2968X just a test"
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/386276.html

標籤：javascript json 得到每个

上一篇：如何撰寫jq查詢以將JSON檔案轉換為CSV？

下一篇：個人收藏的網站(會更新)