jQuery插入JSON值到具有特定类的元素
我对今天一直试图放在一起的一些jQuery有点麻烦。jQuery插入JSON值到具有特定类的元素
基本上我试图实现的是动态地将价格插入到我的页面上的价格按钮中,通过从JSON订阅源读取。
这个想法是,有一个空的跨度将包含价格。我已经给所有的价格跨越类别.getPriceNew
。每个跨度也有一个id,它等于此项目的SKU编号,如<span class="getPriceNew" id="123456"></span>
。
机制是,对于具有类.getPriceNew
的每个跨度,将查询JSON以获取作为查询字符串一部分使用的SKU id的信息。
这里是我试图
的jQuery代码的一个例子
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
return(data.Variants[0].Price);
});
$(this).html("€"+priceNew);
})
HTML
<span class="getPriceNew" id="123456"></span>
<span class="getPriceNew" id="789123"></span>
<span class="getPriceNew" id="456789"></span>
<span class="getPriceNew" id="654321"></span>
JSON例 这是从一个单一的项目JSON饲料会是什么样子 - 我已经过滤了一点 /api/MyApi.svc/GetProductBySku/123456
与有效的JSON更新
{
"Age": {
"Description": "Age 18+",
"Thumbnail": "http://someurl.com/productImages/assets/img//icon18.gif"
},
"Barcode": {
"Barcode": "5026555408684"
},
"Description": "HTML",
"Id": 12214,
"Packshots": [
"http://someurl.com/productImages/914383/1min.jpg",
"http://someurl.com/productImages/914383/2med.jpg",
"http://someurl.com/productImages/914383/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Format",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1364252400000+0100)/",
"Screenshots": [],
"Title": "Product Title",
"Variants": [
{
"Id": 22488,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 49.97,
"Sku": 914383,
"Type": {
"Description": "Pre-Order"
}
}
],
"Vendor": {
"Description": "Take Two Interactive Software"
},
"VideoHTML": "HTML",
"status": {
"Response": "product found",
"Success": true
}
}
我喜欢一些帮助在此作为我真的在这个阶段抓我的新手头。我设法让console.log将价格输出到日志中,但是当我尝试将它们插回跨度时,我所得到的只是[object] [Object]。
你正在做
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
return(data.Variants[0].Price);
});
$(this).html("€"+priceNew);
})
getJSON
返回一个jqXHR
对象,这是不是你所需要的。试试这个:
$(".getPriceNew").each(function() {
var sku = $(this).attr("id");
// Save a refference to this span.
var thisSpan = $(this);
$.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
// Request complete, NOW we can use the data we got!
thisSpan.html("€"+data.Variants[0].Price);
});
})
回调是你想从你的AJAX调用使用你的数据。所有AJAX方法($ .ajax,$ .get,$ .post,$ .getJSON等)将返回一个jqXHR对象。
是的,'jQuery.getJSON '返回一个'jqXHR'(这是一个“延迟”实现)。所以+1:更新需要在回调中发生。 – founddrama 2013-02-20 15:48:05
好的,谢谢你的提示。似乎我现在对我的$(this).html(“€”+ data.Variants [0] .Price)有点麻烦;'它似乎没有为每个'.getPriceNew'设置HTML跨越。 有没有可能它'this'不再是jquery对象? – 2013-02-20 16:02:30
事实上,我只是检查,现在'$(this)'是JSON,不再是跨度选择器。关于如何构建这个的任何提示,以便我仍然可以插入我的价格? 。 – 2013-02-20 16:45:30
我觉得你的JavaScript代码是正确的,但你的JSON输出有两个错误: 1: “说明”:“这里的一些HTML描述,< - 您忘记关闭的引号 2: ”ID“:0},< - 删除右括号
所以您的JSON会导致这样的:
{
"Age": {
"Description": "Age 18+",
"Thumbnail": "http://url.com/image.gif"
},
"Barcode": {
"Barcode": "4876416541647"
},
"Description": "Some HTML Description here",
"Id": 12214,
"Packshots": [
"http: //url.com/productImages/914383/1min.jpg",
"http: //http: //url.com/2med.jpg",
"http: //http: //url.com/3max.jpg"
],
"ID": 0,
"Publisher": {
"Description": null
},
"Release": "/Date(1364252400000+0100)/",
"Screenshots": [],
"Title": "Titleoftheproduct",
"Variants": [
{
"Id": 22488,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 49.97,
"Sku": 914383,
"Type": {
"Description": "Pre-Order"
}
}
],
"Vendor": {
"Description": "Vendorname"
},
"VideoHTML": "<iframewidth="725"height="408"src="http: //www.youtube.com/embed/videoseries?list=PLofwA47XDv2_KnfUY52_8mlWg0iUEv8ci"frameborder="0"allowfullscreen></iframe>",
"status": {
"Response": "productfound",
"Success": true
} }
现在你的代码
data.Variants[0].Price
将返回49。97 验证的Json,你可以将其粘贴到http://jsonlint.com/我认为这是非常有用的
希望这有助于
感谢您的建议。我非常肯定,当我把它粘贴在这里时,我只是*了JSON。我只是通过JSONlint运行实时JSON并验证了 – 2013-02-20 16:17:06
我已经更新了JSON示例以生成有效的代码。感谢您指出错误。 – 2013-02-20 16:41:11
你必须序列化JSON对象。 看看http://*.com/questions/191881/serializing-to-json-in-jquery和http://*.com/questions/3593046/jquery-json-to-string – SimaWB 2013-02-20 15:46:06