我在这里有这个超级奇怪的问题,我似乎无法正常工作。我将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(
有关。几乎就像它创建一个双表一样。我曾尝试在运行带有相同结果的追加脚本之前清除表,并检查所有标签是否正确关闭。我的大脑今晚一定不能正常工作。预先感谢您的支持。
您附加了两次数据,因为每个循环中的第三个循环遍历图像,该图像具有两个值:路径和链接。因此,请不要这样做,无论如何您永远不会使用来自第三循环的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"))
));
});
});
编辑:
我添加了处理空图像值的逻辑。现在它显示所有用户产品。
您将<tr>
附加到div,而不是<table>
。