skip to Main Content

I am having issues with using the Ebay API with my Angular application. What I’m doing is getting data back from Ebay which is in the form of JSON. This is all fine but I keep getting this error:

Uncaught ReferenceError: _cb_findItemsByKeywords is not defined

See my TypeScript code below:

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { url } from 'inspector';

@Component({
  selector: 'app-web-scrape',
  templateUrl: './web-scrape.component.html',
  styleUrls: ['./web-scrape.component.css']
})
@Injectable({
  providedIn: 'root'
})
export class WebScrapeComponent implements OnInit {

  _cb_findItemsByKeywords(root) {
    var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
    var html = [];
    html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
    for (var i = 0; i < items.length; ++i) {
      var item     = items[i];
      var title    = item.title;
      var pic      = item.galleryURL;
      var viewitem = item.viewItemURL;
      if (null != title && null != viewitem) {
        html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
        '<td><a href="' + viewitem + '" target="_blank">' + title + '</a></td></tr>');
      }
    }
    html.push('</tbody></table>');
    document.getElementById("results").innerHTML = html.join("");
  }  // End _cb_findItemsByKeywords() function

  ngOnInit() {
    var url = "https://svcs.ebay.com/services/search/FindingService/v1";
    url += "?OPERATION-NAME=findItemsByKeywords";
    url += "&SERVICE-VERSION=1.0.0";
    url += "&SECURITY-APPNAME=ConorRaf-TheEazyT-PRD-d55b8f6ea-a1f297a5";
    url += "&GLOBAL-ID=EBAY-US";
    url += "&RESPONSE-DATA-FORMAT=JSON";
    url += "&callback=_cb_findItemsByKeywords";
    url += "&REST-PAYLOAD";
    url += "&keywords=harry%20potter";
    url += "&paginationInput.entriesPerPage=3";
    console.log("hello from ts");
    var s=document.createElement('script'); // create script element
    s.src = url;
    console.log(s.src)
    document.body.appendChild(s);

  }
}

The code compiles fine, and returns some sort of JSON objects, but I get this error within the console:

enter image description here

The error seems to be within the callback:

enter image description here

HTML just for reference:

<html>
<head>
<title>eBay Search Results</title>
</head>
<body>
<h1>eBay Search Results</h1>
<div id="results"></div>


</body>
</html>

2

Answers


  1. Why are you using this script thing? You should rather stick to the Angular way and use the HttpClient service.

    Your code would look like:

    this.http.get(url).subscribe(root => _cb_findItemsByKeywords(root));
    

    instead of adding the request in a script tag.

    You can first get a feeling of how it works with a simple:

    this.http.get(url).subscribe(root => console.log(root));
    

    and build the logic from there.

    And by the way, the Angular way is not to manipulate DOM directly like you do. Much of the power of Angular comes from templating and data binding. I advise you to explore the Angular doc to get a good grasp of what is going on when you use Angular.

    Login or Signup to reply.
  2. Yes as said above you shouldn’t be using script with angular. It goes against the principals of the language. I would highly suggest checking out the Angular Docs to gain a better understanding of how to use components.

    Also I presume you are a beginner so another good resource for novice programmers is available at Tutorialspoint Angular

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search