Issue encountered in AngularJS while configuring resources for the action `query`: Anticipated response was an object, but received an array instead

I've been attempting to utilize Angular 1.3 to access a REST service, but I keep encountering an error stating "Error: error:badcfg Response does not match configured parameter".

My suspicion lies in the controller where I invoke $scope.data. Even though I believe .data is correct, it continues to throw this error.

Below is my service code, along with a sample REST call:

var pfcServices = angular.module('pfcServices', ['ngResource'])

pfcServices.factory('pfcArticles', ['$resource',
  function($resource){
      return $resource('https://myrestcall.com/data, {}, {
          query: {method:'GET'}
      });
  }]);

And here's the snippet of my controller:

var pfcControllers = angular.module('pfcControllers', []);

pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {
    $scope.data = pfcArticles.query();
}]);

When using Internet Explorer, I receive a CORS message indicating that XMLHttpRequest for necessitates Cross Origin Resource Sharing (CORS). However, this issue doesn't arise in Chrome.

Yet, I'm unsure if this problem is directly related to my implementation or just a mistake on my end. To troubleshoot, I have added my test site to the list of CORS in Azure Mobile Web services where the test REST call is hosted.

Given my limited experience with Angular, I am inclined to think that the error stems from my own misstep.

Answer №1

I don't understand why you have specified the query properties for this resource. You should either remove the configuration for query

return $resource('https://example.com/api/articles', {});

or set isArray to true in the query configuration.

return $resource('https://example.com/api/articles', {}, {
          query: {method:'GET', isArray:true}
      });

This error is occurring because Angular is expecting an object in the response, but receiving an array instead.

The $resource's query method already has the correct flag set. By redefining the query configurations, you are triggering this error. Take a look at the documentation for $resource.

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

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

I have been facing an issue while trying to pass a prop from a custom object I have defined. The structure of the object is as follows: export type CustomObjectType = { data?: DataObject }; export type DataObject = { id: number; name: stri ...

When running through Selenium web driver, JS produces inaccurate results

Currently, I am utilizing JavaScript to determine the number of classes of a specific type. However, when I run the JS code in Webdriver, it provides me with an incorrect value. Surprisingly, when I execute the same JavaScript on the Firebug console, it gi ...

Unexpected Quote Will Not Appear

My random quote generator is not functioning properly, it should display a different quote on each click of the button. My colleagues are also facing the same issue. It was working fine when implemented in JavaScript, but after converting all the syntax to ...

What is the best way to change the first letter of a string to uppercase in JavaScript?

Creating a form with 10 textboxes and one button, I want the first letter of any text entered into a textbox to be capitalized when the user loses focus on that specific field. To achieve this functionality, JavaScript seems like the most suitable option. ...

Using Axios and Typescript to filter an array object and return only the specified properties

I'm currently working on creating an API to retrieve the ERC20 tokens from my balance. To accomplish this, I am utilizing nextjs and axios with TypeScript. However, I'm encountering an issue where the response from my endpoint is returning exces ...

Vue Component Unit Testing: Resolving "Unexpected Identifier" Error in Jest Setup

Having just started using Jest, I wanted to run a simple unit test to make sure everything was set up correctly. However, I encountered numerous errors during compilation while troubleshooting the issues. When running the test suite, Jest successfully loc ...

I am experiencing an issue with applying responsiveFontSize() to the new variants in Material UI Typography

I am looking to enhance the subtitles in MUI Typography by adding new variants using Typescript, as outlined in the documentation here. I have defined these new variants in a file named global.d.ts, alongside other customizations: // global.d.ts import * a ...

Learn the method of conditionally resetting the state count using React hooks

When a user submits the form, the handleSubmit function runs to count the number of li elements with class names containing "show" within the search results div. It adds up these counts using setStoreCount(prevCount => prevCount + 1) and updates the UI ...

The MyFunction method in the Typescript Class.prototype is experiencing issues, but is still

It's puzzling why I encounter an error even though the code functions properly. Could this be a bug in the compiler? (I am using Visual Studio Code with Angular 2) class A { fun(a: number) { return a+2; } } A.prototype.F = funct ...

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

I'm in the final stages of developing a weather application using TypeScipt and React. The last feature I need to implement is the ability for users to add queried locations to a favorites list, accessed through the "favorites" page. By clicking on a ...

Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is: stWay: stProposer: stTime: hello John 2017-09-07 I have successfully programmed a button to make div1 a ...

Implementing dynamic webpage updates based on dropdown list selections

In my webpage, I am displaying a list of movies fetched from an API. The issue I am facing is related to sorting the movies based on user selection. When I uncomment one of the sort methods in my code, it works as intended. What I want to achieve is that ...

React - callbackFromApp function is executing only one time when clicked

Whenever I click a button within my child React module, it is meant to increment the timer and then pass back the timer in minutes and total seconds to the parent component where it will be stored as state. The issue I am facing is that when I click the b ...

navigating between html pages using sliding next and previous buttons

I am in the process of developing a multi-page form spread across 4 different pages. I would like to incorporate next and previous buttons to allow users to easily navigate through the form. Although I have tried looking online for solutions, most results ...

Initiating a file download using HTML

When I try to initiate a download by specifying the filename, instead of downloading, it opens in a new tab. The code snippet below shows what I am currently using. Additionally, I am working on Chrome Browser. <!DOCTYPE html> <html> < ...

Steps for resolving the issue: TypeError: logger.logSuccess is not a function

As I work on building a back-end service with Spring MVC and an AngularJS front-end client, I encountered an error in my console while attempting to send a message to the user upon successful file upload. Can anyone help me identify where the issue lies in ...

The functionality of AngularJS ng-include and HistoryJS has suddenly ceased to work

After implementing the ng-include directive in my code, I encountered a strange issue. Whenever I navigate to a page that includes this directive, I find myself trapped on that page. The back button no longer functions and I am stuck in an endless loop of ...

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

Upon attempting to start the server, the module 'express-stormpath' could not be located

Upon trying to execute node server.js (in a regular terminal without superuser or root permissions), the following error is thrown: alphaunlimitedg@AUNs-PC:~/my-webapp$ node server.js module.js:442 throw err; ^ Error: Cannot find module 'expr ...

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

I recently began using DSpace and I am attempting to implement an expand/collapse feature in the Discovery sidebar of DSpace 4.2 xmlui using the Mirage theme. After finding some helpful jquery code, I attempted to add this functionality by placing the js f ...