What could be causing my AngularJS JSONP request to fail when trying to query Solr?

Question

What could be causing my AngularJS JSONP request to fail when trying to query Solr?

After attempting to query my Solr server with the provided code snippet:

var url ="http://localhost:8080/solr/sdc/selectwt=json&callback=JSON_CALLBACK&q=opioid"
$http.jsonp(url ).success(function(res){
    console.log(res)
})

An error is returned in the console:

select?wt=json&callback=angular.callbacks._0&q=opioid:formatted:1
Uncaught SyntaxError: Unexpected token :

The response output displays as follows:

{"responseHeader":{"status":0,"QTime":0,"params":{"q":"opioid","callback":"angular.callbacks._0","wt":"json"}},"response":{"numFound":28,"start":0,"docs": ........

This issue seems to be related to the format of the Solr response, particularly the first occurrence of :

I'm unsure if I have a strong grasp on what jsonp entails to troubleshoot effectively. Furthermore, using JSONP may come across as unorthodox. Is it considered safe for use within a corporate setting?

javascript angularjs solr jsonp

Answer 1

Answer №1

After implementing the code myself, I was able to successfully get it to work. It is puzzling why the provided version did not function as expected.

.factory( 'searchService', function ( $q ) {
    var search_service = {};

    search_service.search = function ( query ) {
        return $q(function(resolve, reject){
            var jsonpReq = document.createElement("script");

            /*Json callback, called from injected script tag*/
            loadResults = function (jsonResp) {
                resolve(jsonResp)
            };

            jsonpReq.src = 'http://localhost:8080/solr/sdc/select?wt=json&json.wrf=loadResults&q=' + query;
            jsonpReq.type = "text/javascript";
            document.body.appendChild(jsonpReq);
        })

    };

    return search_service;
} )

Remember that $q promises require you to use .then() instead of .success()

Answer 2

After implementing the code myself, I was able to successfully get it to work. It is puzzling why the provided version did not function as expected.

.factory( 'searchService', function ( $q ) {
    var search_service = {};

    search_service.search = function ( query ) {
        return $q(function(resolve, reject){
            var jsonpReq = document.createElement("script");

            /*Json callback, called from injected script tag*/
            loadResults = function (jsonResp) {
                resolve(jsonResp)
            };

            jsonpReq.src = 'http://localhost:8080/solr/sdc/select?wt=json&json.wrf=loadResults&q=' + query;
            jsonpReq.type = "text/javascript";
            document.body.appendChild(jsonpReq);
        })

    };

    return search_service;
} )

Remember that $q promises require you to use .then() instead of .success()

Answer 3

Answer №2

For successful integration, remember to include JSON_CALLBACK in your URL. This simple step made a difference for me.

Your modified URL will look something like this:

http://localhost:8080/solr/sdc/selectwt=json&json.wrf=JSON_CALLBACK&q=opioid

Give it a try and see the results.

I hope this tip proves to be helpful for you as well.

Answer 4

For successful integration, remember to include JSON_CALLBACK in your URL. This simple step made a difference for me.

Your modified URL will look something like this:

http://localhost:8080/solr/sdc/selectwt=json&json.wrf=JSON_CALLBACK&q=opioid

Give it a try and see the results.

I hope this tip proves to be helpful for you as well.

What could be causing my AngularJS JSONP request to fail when trying to query Solr?

Answer №1

Answer №2

Similar questions

angular-in-memory-web-api encounters a 404 error

The component in React does not refresh after updating the state

Is it recommended to rely on Javascript for altering the content of a div across an entire website?

AngularJS $http.get request that includes a parameter with a null value

Error: Unable to modify the value of a protected property '0' in the object 'Array'

There seems to be an issue with the $scope value not being properly updated

Managing Datatable with a dynamic header and data is an essential skill that can greatly enhance

Error encountered: Multer TypeError - fields does not have a function called forEach

Interpolating strings in a graphQL query

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

AngularJS: The delay in updating variable bindings following a REST API call

Unable to access setRowData() in AgGrid/Angular 2 leads to rendering of the grid without displaying any rowData

Having trouble executing react-native project using the command "npx react-native run-android"

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

Annoying jQuery animation error: struggling to animate smoothly and revert back. Callback function conundrum?!

Is there a way to compare two regex values using vuelidate?

What is the best way to integrate environment-specific configuration options into an AngularJS and Typescript project?

Does Vuejs emit an event when a specific tab becomes active in boostrap-vue?

What steps can be taken to resolve the mouse-pointer problem?

What is the best way to define properties for objects within views.py so that the updated object can be effectively passed to JavaScript code?