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

Question

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

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

这个想法是有一个包含价格的空跨度。我已经给出了所有的价格跨越类.getPriceNew。每个跨度也有一个 id，它等于像 <span class="getPriceNew" id="123456"></span> 这样的项目的 SKU 编号。

机制是，对于每个具有 .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]。

Answer 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("€"+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 对象。

Answer 2

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

所以你的 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/ 我认为非常有用

希望对你有帮助