Home API call in app's service.js isn't being pushed to page's controller
Reply: 1

API call in app's service.js isn't being pushed to page's controller

Codenami
1#
Codenami Published in 2018-01-12 21:05:45Z

My app returns an array of 'card' objects from an api, and displays each on the UI.

card-search.html

<div class="main-view container">
    <h1>Card Search</h1>

    <div id="card-search" ng-controller="cardSearchController">

            <form class="search-form">
               <p>Retrieve card information via name or multiverse ID</p>
                <input ng-model="cardInput" type="text" name="" value="">       
                <select ng-model="selectedItem" ng-options="item as item.label for item in items"></select>
                <button ng-click="getCard(cardInput)" type="button" name="button">Search</button>
            </form>

            <div class="container result-container">

                        <div ng-repeat="card in displayedCards" class="row display-row">
                            <div class="col-sm-6 card-display">
                                <img src={{card.imageUrl}} alt="">
                            </div>
                            <div class="col-sm-6 card-stat-display">
                                <p><strong>Name:</strong> {{card.name}}</p> 
                                <p><strong>Mana Cost:</strong> {{card.manaCost}}</p>
                                <p><strong>Converted Mana Cost:</strong> {{card.cmc}}</p>
                                <p><strong>Colors:</strong> {{card.colors}}</p>
                                <p><strong>Type:</strong> {{card.type}}</p>
                                <p><strong>Text:</strong> {{card.text}}</p>
                                <p><strong>Flavor Text:</strong> <i> {{card.flavor}}</i></p>
                                <p><strong>power:</strong> {{card.power}}</p>
                                <p><strong>Toughness:</strong> {{card.toughness}}</p>
                            </div>   

                        </div>
            </div>            
    </div>

So this should display each card in cardDisplay, which is an array of objects.

cardSearchController.js

angular.module('mainApp').controller('cardSearchController', function($scope, mainService) {

$scope.getCard = function(searchInput) {

    console.log('$scope.selectedItem.label', $scope.selectedItem.label)
    if ($scope.selectedItem.label === 'Search By Multiverse ID') {
        mainService.getCardById(searchInput).then(function(card){
            $scope.displayedCard = card;
        })
    }

    if ($scope.selectedItem.label === 'Search By Name') {
        var searchInput = searchInput.split(' ').join('+')
        mainService.getCardByName(searchInput).then(function(uniqueCards){
            console.log('unique cards in controller', uniqueCards);
            $scope.displayedCards = uniqueCards;
        })
    }

};

$scope.items = [
    {
        label: 'Search By Name'
    },
    {
        label: 'Search By Multiverse ID'
    }
]

});

This is the controller, the value we're trying to get displayed is uniqueCards.

service.js

angular.module('mainApp').service('mainService', function($http, 
$state) {


this.getCardByName = function(name) {
    console.log(11111, 'I am here');
    return $http({
        method: 'GET',
        url: 'https://api.magicthegathering.io/v1/cards?name=' + name + '&contains=imageUrl'
        }).then(function(response) {

            console.log(response.data);
            var returnedCards = response.data.cards;
            var uniqueCards = [];
            console.log('the contents of returned cards: ', returnedCards);

            for (var card of returnedCards) {
                var testedCard = card;
                var uniqueName = true;

                for (var uniqueCard of uniqueCards) {

                    if (testedCard.name === uniqueCard.name) {                            
                        uniqueName = false; 
                        break;
                    }
                }
                if (uniqueName) {
                    uniqueCards.push(testedCard);
                }
            }

            console.log('here are the unique cards: ', uniqueCards);
            return uniqueCards;

            }), 
            function (cards) {
                alert('An Error', cards);
            };
}

This is the service. this.getCardByName should be returning uniqueCards to the controller.

So uniqueCards did get made according to console.log, but the controller isn't receiving it. I additionally receive the message from the dev console when loading the page that mainService.getCardByName isn't a function:

angular.js:14642 TypeError: mainService.getCardByName(...).then is not a function
at ChildScope.$scope.getCard (cardSearchController.js:14)
at fn (eval at compile (angular.js:15500), <anonymous>:4:223)
at callback (angular.js:27285)
at ChildScope.$eval (angular.js:18372)
at ChildScope.$apply (angular.js:18472)
at HTMLButtonElement.<anonymous> (angular.js:27290)
at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)

invoking getCardByName indicates that it isn't defined, though the script tag for it is in the index.html.

Craneum
2#
Craneum Reply to 2018-01-12 22:51:09Z

It's not saying getCardByName isnt a function, it's saying getCardByName.then() isn't a function. You've already executed the .then() in your mainService

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.299935 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO