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:
The error seems to be within the callback:
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
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:
instead of adding the request in a
script
tag.You can first get a feeling of how it works with a simple:
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.
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