CODEWITHSUNDEEP
jqueryhtmljsonhtml-table
Jason Waltz
Jason Waltz

Reputation: 435

Appending JSON to a table using jquery always appends the data twice. Not sure how to fix this?

I have this super odd issue here and I can't seem to get this to work properly. I am appending json data to a table but it keeps appending each line of data twice. I am hopeful someone here can see what I could possibly be doing wrong. 

   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>

I assume this is some error with my JQuery and not my html but I have exhausted all my options here that I am aware of. I feel like it might have something to do with "table").append($("<tr>").append(. Almost like its creating a double table. I have tried clearing the table before running the append script with same results, as well as checking all my tags are closed properly. My brain must not be working right tonight. Thanks in advance for any support.

Upvotes: 0

Views: 48

Answers (1)

Mortimer
Mortimer

Reputation: 402

You append data twice because your third each loop loops through image which have two values: path and link. So just don't do it, you never uses v3 from third loop anyway:

$.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"))
    ));
  });
});

EDIT:

I added logic to handle empty image value. Now it shows all users products.

Upvotes: 1

Related Questions