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("&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]。

來源

2013-02-20 Darragh Verschoyle

你必須序列化JSON對象。看看http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery和http://stackoverflow.com/questions/3593046/jquery-json-to-string – SimaWB 2013-02-20 15:46:06

你正在做

$(".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-20 15:45:41 Jeff

是的，'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": "&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-20 16:08:57 Vermicello

感謝您的建議。我非常肯定，當我把它粘貼在這裏時，我只是屠殺了JSON。我只是通過JSONlint運行實時JSON並驗證了 – 2013-02-20 16:17:06

我已經更新了JSON示例以生成有效的代碼。感謝您指出錯誤。 – 2013-02-20 16:41:11

jQuery插入JSON值到具有特定類的元素

回答

相關問題