1

我今天尝试整理的一些 jQuery 有点麻烦。

基本上，我想要实现的是通过读取 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("&euro;"+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]。

4

2 回答 2

1

你在做

$(".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("&euro;"+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("&euro;"+data.Variants[0].Price); 
    });

})

回调是您想要使用从 AJAX 调用中获得的数据的地方。所有 AJAX 方法（$.ajax、$.get、$.post、$.getJSON 等）都将返回一个jqXHR对象。

于 2013-02-20T15:45:41.210 回答
0

我认为您的 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": "&lt;iframewidth=&quot;725&quot;height=&quot;408&quot;src=&quot;http: //www.youtube.com/embed/videoseries?list=PLofwA47XDv2_KnfUY52_8mlWg0iUEv8ci&quot;frameborder=&quot;0&quot;allowfullscreen&gt;&lt;/iframe&gt;",
"status": {
    "Response": "productfound",
    "Success": true
}  }

现在你的代码

data.Variants[0].Price

将返回 49.97 来验证 Json 你可以将它粘贴到http://jsonlint.com/我认为非常有用

希望这可以帮助

于 2013-02-20T16:08:57.007 回答