Access information through the restful api using the angularjs service $resource

I am attempting to utilize the $resource service with the surveygizmo API.
Here is my code:

HTML :

<div ng-app="Survey">
<body>
<div ng-controller="SurveyCtrl">
    {{survey.data.title}}
</div>
</body>
</div>

My script :

angular.module('Survey', ['ngResource']);

function SurveyCtrl($scope, $resource) {
    $scope.surveygizmo = $resource('https://restapi.surveygizmo.com/v3/survey/:id',
        {id: '@id'},
        {get:{method:'JSONP', params: {'user:pass':'xxx@xxxx:xxxx', q:'angularjs', callback:'JSON_CALLBACK'}, isArray:true}});

$scope.survey = $scope.surveygizmo.get({id:xxxx}, function(survey) {
        alert('this is ok');
    }, function(err){
        alert('request failed');
    });
}

When I test it, the alert 'request failed' appears on my page. There is no JSON result displayed on the page, but I can see it in the firebug network menu.
Could I be missing something?
kalaoke

Answer №1

Although this question is quite dated, I wanted to offer some assistance. I am currently employed at SurveyGimzo and can confirm that we do provide support for JSONP, JSON, and XML formats. To request JSONP, you will need to explicitly specify it in the URL structure. Taking your example URL into consideration, it should appear as follows:

https://restapi.surveygizmo.com/v3/survey/:id.jsonp

By including JSON_CALLBACK as part of the ngResource parameters in your get action, you will receive an appropriately wrapped object in return.

I have been experimenting with a small AngularJS application utilizing SG REST API. Feel free to explore my GitHub repository https://github.com/sfisherGizmo/ang-app.

This information is intended to assist anyone else who happens to come across this in the future.

Answer №2

Survey Gizmo does not have JSONP support. The supported HTTP methods by Survey Gizmo are PUT, POST, DELETE. For more information, you can refer to the official documentation.

If they do support JSONP, it is not mentioned in their API documentation.

When changing from .get to .query, the request details include:

Request URL:https://restapi.surveygizmo.com/v3/survey/xxxx
Request Method:OPTIONS
Status Code:200 OK

If using .get instead, the response details show:

Request URL:https://restapi.surveygizmo.com/v3/survey/xxxx
Request Method:GET
Status Code:200 OK

However, the response is not callback-wrapped in JSONP format. Even though a response can be seen in Firebug network console, Angular cannot unwrap it due to the lack of JSONP response.

For AngularJS examples using ngResource, check out this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive map navigation feature using React.js

Can someone help me figure out how to create a dynamic map with directions/routes? I am currently using the Directions Renderer plugin, but it only shows a static example. I want to generate a route based on user input. Below is the code snippet: /* ...

Obtain the currently selected HTML element using tinyMCE

Within my editor, I have the ability to choose text and show it using the code below: alert(tinyMCE.activeEditor.selection.getContent({format : "html"})); The problem is that this function only returns text and not HtmlElement. This means I am unable to ...

Unable to integrate bower with gulp for automation

I am trying to get gulp to run the installation of all files listed in my bower.json. However, despite writing the code below, it is not working and I'm not seeing any errors. What could be causing this issue? var gulp = require("gulp"); var bower = ...

Converting JSON array with ES6 functions

I have a specific array format that needs to undergo transformation. { [ { "condition": "$and", "children": [ { "column": "Title", "comparison": "$eq", "columnValue& ...

Instructions on adding a file path to the package.json file

Is it possible to create a script in the package.json file that allows me to run a file located in the parent folder of the package.json file, rather than the same directory? I would like the syntax to be similar to this: "scripts": { "server": " ...

Display information from a Google Sheet onto a leaflet map based on specified categories

I am currently facing some challenges while creating a map with markers using data from Google Sheet and leaflet. Despite my efforts, I have encountered a few bugs that are proving to be difficult to resolve: Group Filtering - Although I can successfully ...

What is the best way to retrieve specific JSON data from an array in JavaScript using jQuery, especially when the property is

Forgive me if this question seems basic, I am new to learning javascript. I am currently working on a school project that involves using the holiday API. When querying with just the country and year, the JSON data I receive looks like the example below. ...

Saving decimal values in a React Material UI textfield with type number on change

I am currently working on a textfield feature: const [qty, setQty] = useState({ qty: "0.00" }); ..... <TextField required id="qty" type="number" label="Qtà" value={qty.qty} step="1.00& ...

What could be causing the delay in loading JSON data on my HTML page?

I have developed my controller to accept JSON data in Wordpress: app.controller('AboutController', function($scope, $http) { $scope.device=device; var page_id = 2; $.ajax({ url: 'http://davidemilone.com/provawp/?json=get_page& ...

Utilizing JavaScript or jQuery to adjust the cursor pointer value based on user input

Issue: Need help with live updating of input value to range input pointer [Check out my CodePen for reference][1] Adjust upper range input pointer based on lower range input pointer ][2] I am currently working on a range-to-range calculator for a book ...

When submitting the club form, my goal is to automatically generate a club admin within the user list in activeadmin

My dashboard.rb setup looks like this: ActiveAdmin.register_page "Dashboard" do menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") } content title: proc{ I18n.t("active_admin.dashboard") } do # form render 'form' # Thi ...

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

Would it be unwise to create a link to a database directly from the client?

If I want to connect my React app to Snowflake all client-side, are there any potential issues? This web app is not public-facing and can only be accessed by being part of our VPN network. I came across this Stack Overflow discussion about making API cal ...

Working with time durations in JavaScript

Is there a way to calculate the duration between a start time and an end time including both hours and minutes? Currently, I have code that only provides me with the hours. Is there any modification I can make to include minutes as well? If so, what chan ...

Get rid of empty spaces in gridstack js

My latest project involves using gridstack js In the image displayed, I have highlighted the excess white space (in blue) that needs to be removed. Take a look at this visual: Any suggestions on how to eliminate this unwanted white space? ...

Leverage variable as an expression when utilizing ng-include

Here is an example of working code: <div ng-include src="'Test.html'"></div> However, this code does not work: <div ng-include src="ctrl.URL"></div> (When ctrl.URL is set to "Test.html"). I have also tried setting it t ...

Activating Unsplash API to initiate download

I am currently following the triggering guidelines found in the Unsplash documentation. The endpoint I am focusing on is: GET /photos/:id/download This is an example response for the photo: { "id": "LBI7cgq3pbM", "width": ...

Perform an asynchronous reload of DataTables using ajax.reload() before calling a function

I need help extracting real-time data from a datatable and populating a form for editing when an edit button is clicked on each row. Despite my efforts, the ajax.reload() function doesn't load the table in time to fill the form with correct data. The ...

Is there a way in JavaScript to activate a web element by clicking on its center?

I have a webpage and I'm looking to simulate clicks using the console. I attempted to do so with the code snippet document.getElementById("myButtonId").click(), but it seems that the element only responds to clicks at its center location. Is there ano ...

Open the URL in a new tab based on certain conditions

Currently, my page redirects if a specific checkbox is selected and the "submit" button is clicked: if request.Form("myCheckbox") = "on" then response.Redirect("/newPage.asp?txt="staff"") else response.Redirect("/thisPage.asp") end if I ...