Working with an API using JSON and Jquery

  • tonybaxter78

    (@tonybaxter78)


    12 years, 5 months ago

    I’ve got a question about calling and displaying an API from Shopping.com. I’ve got it working on a non-wordpress site and am trying to translate it over. The code is in the <head> section on my other site and the productID is specific for each page it is on. I don’t think that would work here since every page shares the same <head>. Here’s the code:

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$.ajax({
  dataType: "json",
  url: 'http://api.ebaycommercenetwork.com/publisher/3.0/json/GeneralSearch?apiKey=xxx&visitorUserAgent&visitorIPAddress&trackingId=xxx&productId=146798281',
  context: document.body
}).done(function(data) {
$("<h5>"+data.searchHistory.productSelection[0].name+"</h5>").appendTo("#shopping-com-name");
  var product_item = data.categories.category[0].items.item[0].product.offers.offer;
$.each(product_item, function( index, value ) {
  var product_link ='<a target="_blank" href="'+value.offerURL+'"><img src="http://lcdtvbuyingguide.com/graphics/shop-button.png"></a>' ;
  var store_logo='<a target="_blank" href="'+value.offerURL+'"><img src="'+value.store.logo.sourceURL+'"></a>' ;
  var product_price='<a target="_blank" href="'+value.offerURL+'">$'+value.basePrice.value+'</a>';
  $("<tr><td>"+product_link+"</td><td>"+store_logo+"</td><td>"+product_price+"</td></tr>").appendTo("#shopping-com-list tbody");

});
});
</script>
</head>

<body>
<span id="shopping-com-name"></span>
<table id="shopping-com-list">
  <thead>
    <tr>
      <th></th>
      <th>Stores</th>
      <th>Prices</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</body>

    The table then goes in the <body> of the page where I want it to render. (API key and tracking ID x’ed out on purpose)

    Even if I put this in the <head> it doesn’t work. It seems like I need to make a different approach due to the way wordpress functions. Anybody got an idea to steer me in the right direction?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 5 months ago

    See this article regarding how to use JS in WordPress: http://codex.ww.wp.xz.cn/Using_Javascript

    Thread Starter tonybaxter78

    (@tonybaxter78)

    12 years, 5 months ago

    Can this method be used for javascript that isn’t located in its own file? The documentation says, “you need to put the script into a JavaScript file and then call it out from within the post.” Since I am changing part of the URL in the script for every page I want this on, I am not using a .js file. Is this possible?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 5 months ago

    Yeah, but you don’t need to load the jquery library again and instead of using a noconflict-wrapper you can just assign the jQuery instance to a dollar variable, e.g:

    $ = jQuery;

    Thread Starter tonybaxter78

    (@tonybaxter78)

    12 years, 5 months ago

    I am still a bit confused about how to implement this. Thank you for helping by the way.

    Do I do this using the advice from your previous two posts:

    <script type="text/javascript">
<!--
$ = jQuery;
  $.ajax({
  dataType: "json",
  url: 'http://api.ebaycommercenetwork.com/publisher/3.0/json/GeneralSearch?apiKey=xxx&visitorUserAgent&visitorIPAddress&trackingId=xxx&productId=146791736',
  context: document.body
}).done(function(data) {
$.each(product_item, function( index, value ) {
  var product_link ='<a target="_blank" href="'+value.offerURL+'"><img src="http://lcdtvbuyingguide.com/graphics/shop-button.png"></a>' ;
  var store_logo='<a target="_blank" href="'+value.offerURL+'"><img src="'+value.store.logo.sourceURL+'"></a>' ;
  var product_price='<a target="_blank" href="'+value.offerURL+'">$'+value.basePrice.value+'</a>';
  $("<tr><td>"+product_link+"</td><td>"+store_logo+"</td><td>"+product_price+"</td></tr>").appendTo("#shopping-com-list tbody");

});
});

//--></script>

    I also keep getting ‘Uncaught SyntaxError: Unexpected token ILLEGAL’ in the console log. I looked at the source and there are <p> tags all over the code. I feel like they are causing problems too.

    Example taken from ‘view source’:

    <p><script type="text/javascript">
<!--
var $ = jQuery;
  $.ajax({
  dataType: "json",
  url: 'http://api.ebaycommercenetwork.com/publisher/3.0/json/GeneralSearch?apiKey=xxx&visitorUserAgent&visitorIPAddress&trackingId=xxx&productId=146791736',
  context: document.body
}).done(function(data) {
$.each(product_item, function( index, value ) {
  var product_link ='<a target="_blank" href="'+value.offerURL+'"><img src="http://lcdtvbuyingguide.com/graphics/shop-button.png"></a>' ;
  var store_logo='<a target="_blank" href="'+value.offerURL+'"><img src="'+value.store.logo.sourceURL+'"></a>' ;
  var product_price='<a target="_blank" href="'+value.offerURL+'">$'+value.basePrice.value+'</a>';
  $("
<tr>
<td>"+product_link+"</td>
<td>"+store_logo+"</td>
<td>"+product_price+"</td>
</tr>
<p>").appendTo("#shopping-com-list tbo</p);</p>
<p>});
});</p>
<p>//--></script></p>

    Here’s the page: http://10rate.com/panasonic-tc-p60vt60-review/
    The script starts at line 650 if you want to look for yourself.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 5 months ago

    That looks fine apart from you need to get rid of the random <p> tags that seem to be embedded in your JS.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Working with an API using JSON and Jquery’ is closed to new replies.