使用 jquery 将 JSON 附加到表中总是会附加两次数据。不知道如何解决这个问题？

Question

我在这里遇到了这个超级奇怪的问题，我似乎无法让它正常工作。我正在将 json 数据附加到表中，但它会不断将每行数据附加两次。我希望这里有人能看到我可能做错了什么。

   data = JSON.parse('[{"status":true,"user":{"username":"Chris","avatar":"https:\/\/s3-storage.\/\/avatars\/iiPjqYlVkijUv9XoPt0YUpyHuueBdkFkrTjIwnJd.gif","rep":{"positive":1,"neutral":0,"negative":0},"products":[{"id":"JucpDM8","title":"Non-Full Access(NFA)","image":{"url":"https:\/\/s3-storage.\/\/product_images\/SDcaqvqginNTmVKwYHCDfajoOqc0OqHjq3pMjyAw.png","path":"product_images\/SDcaqvqginNTmVKwYHCDfajoOqc0OqHjq3pMjyAw.png"},"quantity":{"min":25,"max":1000000},"price":0.02,"currency":"USD","stock_warning":500,"type":"account","stock":12},{"id":"qX4vLC2","title":"Unmigrated(UFA)","image":{"url":"https:\/\/s3-storage.\/\/product_images\/F0PaLkMLbWS9gZt7DtRfMNYm2bufv796HTlm4gFe.jpeg","path":"product_images\/F0PaLkMLbWS9gZt7DtRfMNYm2bufv796HTlm4gFe.jpeg"},"quantity":{"max":1000000,"min":1},"price":5.99,"currency":"USD","stock_warning":5,"type":"account","stock":0},{"id":"sYu98Kq","title":"Semi-Full(SFA)","image":{"url":"https:\/\/s3-storage.\/\/product_images\/5mGCAH4Fsj23MlBHw5yw1UoPsw65dGI1ZkmxwNfN.jpeg","path":"product_images\/5mGCAH4Fsj23MlBHw5yw1UoPsw65dGI1ZkmxwNfN.jpeg"},"quantity":{"max":1000000,"min":1},"price":1,"currency":"USD","stock_warning":5,"type":"account","stock":0},{"id":"7efhwnl","title":"Optifine Cape","image":{"url":"https:\/\/s3-storage.\/\/product_images\/W6q61CMgmlzzwtQlk0jXfaXbOcse4YfhrHEIuF0N.jpeg","path":"product_images\/W6q61CMgmlzzwtQlk0jXfaXbOcse4YfhrHEIuF0N.jpeg"},"quantity":{"max":1000000,"min":1},"price":4.99,"currency":"USD","stock_warning":2,"type":"account","stock":0},{"id":"kBkgLAv","title":"Hypixel Ranked(NFA)","image":{"url":"https:\/\/s3-storage.\/\/product_images\/nxvFRT9YcKVuOHPilMGdLM08i7JhYTdd4Aqq0xSK.png","path":"product_images\/nxvFRT9YcKVuOHPilMGdLM08i7JhYTdd4Aqq0xSK.png"},"quantity":{"max":1000000,"min":1},"price":4.99,"currency":"USD","stock_warning":5,"type":"account","stock":0},{"id":"X5kmV3z","title":"Lamm","image":{"url":"https:\/\/s3-storage.\/\/product_images\/rgGnCcqMIqgvsETsVTWjrF2EhVSwIOE5bXNwEtUC.jpeg","path":"product_images\/rgGnCcqMIqgvsETsVTWjrF2EhVSwIOE5bXNwEtUC.jpeg"},"quantity":{"max":1000000,"min":5},"price":0.05,"currency":"USD","stock_warning":0,"type":"account","stock":0},{"id":"AFwEIkN","title":"Lammy","image":{"url":"https:\/\/s3-storage.\/\/product_images\/mUbSzYsq8iII9Ro3wmJkyWRwk4oBVJmDNKavBGr4.png","path":"product_images\/mUbSzYsq8iII9Ro3wmJkyWRwk4oBVJmDNKavBGr4.png"},"quantity":{"max":1000000,"min":1},"price":1,"currency":"USD","stock_warning":0,"type":"account","stock":0},{"id":"JYcUni4","title":"Jess","image":{"url":"https:\/\/s3-storage.\/\/product_images\/GaVbNGASgkv6LCErOjg1zK9MFWlrySvZGUVNCjPb.png","path":"product_images\/GaVbNGASgkv6LCErOjg1zK9MFWlrySvZGUVNCjPb.png"},"quantity":{"max":1000000,"min":5},"price":0.5,"currency":"USD","stock_warning":10,"type":"account","stock":14}],"groups":[{"id":"4TlYivf","title":"Minecraft Is","image":"","unlisted":false,"products":["sYu98Kq","JucpDM8","qX4vLC2","7efhwnl","kBkgLAv"]},{"id":"GTXwlkU","title":"Streaming","image":"","unlisted":false,"products":["JYcUni4","AFwEIkN","X5kmV3z"]}],"feedbacks":[{"updated_at":"2018-09-16 00:29:35","stars":5,"rating":1,"comment":"The best thing in the world! Thanks!","response":"Thank you so much! Come again!","product":null}],"online":{"state":false,"ago":"1 year ago"},"staff":false}},{"status":true,"user":{"username":"bear","avatar":"\/images\/default-avatar.png?id=55b864e42ffc120971da","rep":{"positive":0,"neutral":0,"negative":0},"products":[{"id":"p9YymiV","title":"fortnite","image":null,"quantity":{"min":1,"max":1},"price":75,"currency":"EUR","stock_warning":0,"type":"service","stock":9223372036854775807}],"groups":[],"feedbacks":[],"online":{"state":false,"ago":"1 year ago"},"staff":false}},{"status":true,"user":{"username":"king","avatar":"\/images\/default-avatar.png?id=55b864e42ffc120971da","rep":{"positive":0,"neutral":0,"negative":0},"products":[{"id":"91vFhN4","title":"uplay","image":null,"quantity":{"min":1,"max":1},"price":4,"currency":"EUR","stock_warning":0,"type":"account","stock":0},{"id":"vX5IJ4T","title":"premium","image":null,"quantity":{"min":1,"max":1},"price":2,"currency":"EUR","stock_warning":0,"type":"service","stock":9223372036854775807}],"groups":[],"feedbacks":[],"online":{"state":false,"ago":"1 year ago"},"staff":false}}]');

$.each(data, function(_, v1) {
  $.each(v1.user.products, function(_, v2) {
    $.each(v2.image, function(_, v3) {
      $(".table").append($("<tr>").append(
        $("<img>").css({
          width: 60
        }).attr("src", v2.image.url),
        $("<td>").addClass("Title").text(v2.title),
        $("<td>").addClass("Price").text("$" + v2.price),
        $("<td>").addClass("Stock").text(v2.stock),
        $("<td>").addClass("Link").append(
          $('<a target="_blank">').attr("href", "https://shop.link/product/" + v2.id + "/")
          .text("Buy Now"))
      ));
    });
  });
});

<html>
<title>Test Check</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<body>
  <div class="table">
    <table>
      <tr>
        <td>Title</td>
        <td>Price</td>
        <td>Stock</td>
        <td>Link</td>
      </tr>
    </table>
  </div>
</body>

</html>

我认为这是我的 JQuery 而不是我的 html 的一些错误，但我已经用尽了我知道的所有选项。我觉得这可能与"table").append($("<tr>").append( 有关。几乎就像它创建一个双表一样。我曾尝试在运行具有相同结果的附加脚本之前清除表格，并检查我的所有标签是否正确关闭。今晚我的大脑一定不能正常工作。提前感谢您的支持。

Answer 1

您附加数据两次，因为您的第三个 each 循环循环遍历具有两个值的图像：路径和链接。所以不要这样做，无论如何你永远不会使用第三个循环中的 v3：

$.each(data, function(_, v1) {
  $.each(v1.user.products, function(_, v2) {
    let image = "";
    if (v2.image && v2.image.url) {
      image = v2.image.url;
    }
    $(".table").append($("<tr>").append(
      $("<img>").css({
        width: 60
      }).attr("src", image),
      $("<td>").addClass("Title").text(v2.title),
      $("<td>").addClass("Price").text("$" + v2.price),
      $("<td>").addClass("Stock").text(v2.stock),
      $("<td>").addClass("Link").append(
        $('<a target="_blank">').attr("href", "https://shop.link/product/" + v2.id + "/")
        .text("Buy Now"))
    ));
  });
});

编辑：

我添加了处理空图像值的逻辑。现在它显示所有用户的产品。