Javascript jQuery向具有特定类的元素插入JSON值

我很抱歉，今天我一直在尝试组合一些jQuery，但遇到了一些小问题

基本上，我试图实现的是通过读取JSON提要，将价格动态地插入到页面上的价格按钮中

其想法是，存在一个包含价格的空白区间。我已经给出了类的所有价格区间

。getPriceNew

。每个跨度还具有一个id，该id等于类似以下

的项目的SKU编号

机制是，对于类为

.getPriceNew

的每个span，将查询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> 

我希望在这方面能得到一些帮助，因为在这个阶段我真的很难对付新手。我已经设法让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等）都将返回一个对象。

您正在执行的操作

$(".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等）都将返回一个对象。

我认为您的javascript代码是正确的，但Json输出有两个错误：

---

1:“Description”：“这里有一些HTML描述，我认为您的javascript代码是正确的，但是您的Json输出有两个错误：

---

1:“Description”：“这里有一些HTML描述，您必须序列化为JSON对象。看，您必须序列化到JSON对象。看，是的，

jQuery.getJSON

返回一个

jqXHR

（这是一个

延迟的
实现）。所以+1：更新需要在回调中进行。好的，谢谢你的提示。似乎我现在在使用
$（this.html（“&euro；”+data.Variants[0].Price”）时遇到了一些问题
它似乎没有为每个
.getPriceNew
跨度设置HTML。有没有可能“this”不再是jquery对象？事实上，我刚刚检查过，现在
$（this）
是JSON，不再是span选择器。有没有关于如何构造它以便我仍然可以插入我的价格的提示？@Jeff这是我想到的-到目前为止似乎很有效
$（“.getPriceNew”）.each（function（）{var sku=$（this.attr（“id”）；$.getJSON（'/api/AthenaService.svc/GetProductBySku/'+sku，function（data）{//Request complete，现在我们可以使用我们得到的数据！$（“.getPriceNew:first”）.html（“&euro；”+data.Variants[0].Price）.attr（“class”，”）；}）；
Yes，
jQuery.getJSON
返回一个
jqXHR
（这是一个
延迟的
实现）.So+1:更新需要在回调中进行。好的，谢谢你的提示。看来我现在在使用
$（this.html（“&euro；”+data.Variants[0].Price）时遇到了一些问题）；
它似乎没有为每个
.getPriceNew
跨度设置HTML。有可能它“this”不再是jquery对象吗？事实上，我刚刚检查了，现在是
$（这个）
是JSON，不再是span选择器。关于如何构造它以便我仍然可以插入我的价格，有什么建议吗？@Jeff这是我想到的-到目前为止似乎有效
$（“.getPriceNew”）.each（function（）{var sku=$（this.attr（“id”）；$.getJSON（'/api/AthenaService.svc/GetProductBySku/'+sku，function（data）{//Request complete，现在我们可以使用我们得到的数据！$（“.getPriceNew:first”）.html（“&euro；”+data.Variants[0].Price.attr（“class”，”）；}）
谢谢你的建议。我很确定我在这里粘贴JSON时，我刚刚通过JSONlint运行了实时JSON，它验证了我已经更新了JSON示例，使其具有有效的代码。谢谢你指出错误。谢谢你的建议。我很确定我在这里粘贴JSON时，我刚刚删除了JSON。我只是通过JSONlint运行实时JSON，并验证EDI已更新JSON示例，使其具有有效代码。感谢您指出错误。
data.Variants[0].Price