javascript - Angular 错误配置错误 : [$resource:badcfg] query

Question

我正在尝试将spotify api与node js和Angular js连接。每当我尝试获取特定艺术家的详细信息时，我都会收到此错误。

app.js

 var app = angular.module('angularjs-starter', ['jsonService', 'ngRoute', 'ngResource'])

app.controller('MainCtrl', function($scope, JsonService) {
    //JsonService.get(function(data) {
    //   $scope.name = data.artists.href;
    // $scope.children = data.artists.items;
    //}); 

    $scope.searchShow = () => {
        JsonService.search.query({
            show: $scope.showname
        }, (response) => {
            console.log(response);
            //   $scope.name = response.artists.href;
            $scope.childr = response;
            $scope.children = response;

        })
    }
    $scope.showDetails = (id) => {
        console.log(id);
        JsonService.detail.query({

            details: id
        }, (response) => {
            console.log(response);
            //   $scope.name = response.artists.href;

        })
    }

});
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix('')
}])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'views/search.html',
            controller: 'MainCtrl'
        })
        .when('/details', {
            templateUrl: 'views/details.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        })

}])

service.js

angular.module('jsonService', ['ngResource'])
    .factory('JsonService', function($resource) {
        return {

            search: $resource('/api/search'),
            detail: $resource('/api/details')
        }
    });

routes.js-来自node js服务器

const
    express = require('express'),
    path = require('path'),
    router = express.Router(),
    superagent = require('superagent')

module.exports = () => {

    router.get('/api/search', (req, res) => {
        const { show } = req.query // this is the same as const show = req.query.show
        console.log(show);
        superagent
            .get('https://api.spotify.com/v1/search?q=' + show + ':&type=artist')
            .end((err, response) => {
                if (err) {
                    res.send(err);
                    console.log(err);
                } else {
                    console.log(response.body.artists.items);
                    res.json(response.body.artists.items);

                }

            })
    })


    router.get('/api/details', (req, res) => {
        const { details } = req.query // this is the same as const show = req.query.show
        console.log(details);
        superagent
            .get('https://api.spotify.com/v1/artists/' + details)
            .end((err, response) => {
                if (err) {
                    res.send(err);
                    console.log(err);
                } else {
                    res.json(response.body);

                }

            })
    })
    router.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, '../client/index.html'))
    })

    return router
}

Node js 能够从详细信息中获取值，但我无法将值获取到 ui

Answer 1

当 API 返回单个对象时，使用 get 操作方法:

$scope.showDetails = (id) => {
    console.log(id);
    //JsonService.detail.query({
    //USE get action method
    JsonService.detail.get({

        details: id
    }, (response) => {
        console.log(response);
        //   $scope.name = response.artists.href;

    })
}

当 API 返回数组时，使用 query 操作方法。

Error: $resource:badcfg

Response does not match configured parameter

Description

This error occurs when the $resource service expects a response that can be deserialized as an array but receives an object, or vice versa. By default, all resource actions expect objects, except query which expects arrays.

To resolve this error, make sure your $resource configuration matches the actual format of the data returned from the server.

For more information, see the $resource API reference documentation.

— AngularJS Error Reference - $resource:badcfg