Using YoutubeAPI v3 within AngularJS for Enhanced Services

Having used services before but still struggling with it, I've come across frequent issues. Therefore, I'm seeking assistance for what seems like an easy problem: retrieving ChannelDetails using YoutubeApi v3.

This is my Service:

appApi.factory('ServiceAPI', ['$http', function($http) {

var factory = {};

    factory.channelDetails = function(channelname){
        return $http.get('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+channelname+'&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
         }
}]);

and here is my controller:

var appApi = angular.module('YoutubeAPI', ['ngRoute'])

appApi.controller('youtubeCTRL', ['$scope','$http','$q','ServiceAPI', function ($scope, $http, $q, ServiceAPI) {
    $scope.channel = [];

    //GET Id on channelname
    $scope.saveNewchlName = function () {

        var channelname = $scope.newchlName;

        $scope.channelDetails = function(channelname){

            ServiceAPI.channelDetails(channelname).success(function (data) {

                $scope.newchannelNames = {
                    channelName: $scope.newchlName,
                    channelId: data.items[0].id,
                    playlistId: data.items[0].contentDetails.relatedPlaylists.uploads
                };
                console.log($scope.newchannelNames)
                $http({
                    method: 'POST',
                    url: 'http://localhost:8080/api/resources/channelNames/',
                    data: $scope.newchannelNames,
                    dataType: 'json'
                }).success(function (data) {
                    $scope.channel.push(data);
                    console.log('SUCCESS!');
                    $scope.error = null;
                }).error(function (data, status) {
                    if (status == 401) {
                        $scope.error = "You are not authenticated to Post these data";
                        return;
                    }
                    $scope.error = data;
                });
    });
    }
}

However, I keep encountering problems related to injection. The latest one states: Provider 'ServiceAPI' must return a value from $get factory method.

I must figure out how to properly implement the channelname in the URL to retrieve specific details.

Answer №1

It appears to be functioning as intended.

Service:

    appApi.factory('ServiceAPI', ['$http', function($http) {

    var factory = {};

        factory.channelDetails = function(channelname, success, error){
            var promise = $http.get('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+channelname+'&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
             if(success){
               promise.success(success);
             }
             if(error){
               promise.error(error);
             };
             }
             return factory;
    }]);

controller:

var appApi = angular.module('YoutubeAPI', ['ngRoute'])

appApi.controller('youtubeCTRL', ['$scope','$http','$q','ServiceAPI', function ($scope, $http, $q, ServiceAPI) {
    $scope.channel = [];
    $scope.video = [];


    var pagetokenarr = [];

    //GET Id on channelname
        $scope.saveNewchlName = function () {

            var channelname = $scope.newchlName;

                ServiceAPI.channelDetails(channelname, function(data){

                    $scope.newchannelNames = {
                        channelName: $scope.newchlName,
                        channelId: data.items[0].id,
                        playlistId: data.items[0].contentDetails.relatedPlaylists.uploads
                    };
                    console.log($scope.newchannelNames)
                    $http({
                        method: 'POST',
                        url: 'http://localhost:8080/api/resources/channelNames/',
                        data: $scope.newchannelNames,
                        dataType: 'json'
                    }).success(function (data) {
                        $scope.channel.push(data);
                        console.log('SUCCESS!');
                        $scope.error = null;
                    }).error(function (data, status) {
                        if (status == 401) {
                            $scope.error = "You are not authenticated to Post these data";
                            return;
                        }
                        $scope.error = data;
                    });


        });
    }

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

Migrating from AngularJS to the latest version, Angular12, may present some challenges such as the error message: "Unable to resolve

Currently, I am in the process of migrating from AngularJS 1.8.2 to angular 12. After transitioning from grunt to webpack for compilation, my next step is tackling the actual migration to Angular. My initial goal is to have Angular and AngularJS coexist si ...

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

Acquire a set of picture cards for displaying in a grid layout

After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, ...

The pop-up box triggered by Onbeforeunload will not be displayed

Currently, I am in the process of developing a website that includes user profiles. At this stage, I am focusing on the image upload functionality. When a user successfully uploads an image, it is stored in four different folders: one for size 25, 100, 150 ...

The jQuery autocomplete feature is malfunctioning, as it is unable to display any search

Creating a country list within an ajax call involves working with an array of objects: $.ajax({ url: '//maps.googleapis.com/maps/api/geocode/json?address=' + zipCode + '&region=AT', type: 'GET', dataType: &apo ...

Error: A DOMException was caught in the promise while trying to push the router

Currently, I am facing an issue while working with React. An Uncaught DOMException occurs when trying to push the router. This exception specifically happens when I attempt to push a new URL into the router using an event triggered from a button in a mod ...

Is there a way to troubleshoot why new data is not appending to existing data in React's infinite scroll feature?

I'm currently working on implementing react infinite scrolling for the first time. I've encountered an issue where the initial array of data keeps repeating. function Details() { const [facility, setFacility] = useState([]); const [loading, set ...

Is it possible to utilize jQuery's .wrap or .wrapInner to encase a variety of elements within them?

I am working with a HTML structure that looks like this: <section> <item> <ele class="blue" /> <ele class="green" /> <ele class="red" /> </item> <item> <ele class="blue" /> <ele ...

Is there a way to alter the color of a button once it has been clicked?

For a school project, I am working on coding a website to earn extra credit. My goal is to create a fancy design that stands out. One of the main things I am trying to achieve is having a button change color when it is clicked, similar to how it highlight ...

The font family specified in the Materia UI theme is experiencing compatibility issues on browsers that are not Chrome

Having difficulty overriding some elements with a specific font, as it seems to work perfectly on Chrome but not on other browsers like Safari and FireFox. Could there be something overlooked? Below is the code snippet: const customTheme = createMuiTheme( ...

Get Angular events in the proper order

I am currently facing challenges with event handling in AngularJs. In my service, I send out events using the following line of code : $rootScope.$emit("FNH."+this.status, flowNodeHelper); When receiving the event in service "S1," I handle it as follows ...

What is the process for uploading or hosting a Reactjs website?

Currently, I am in the process of developing a React web application project using create-react-app. The project is nearly complete and as part of my preparation, I have been researching how to obtain a hostname. During my research, I came across https://w ...

Changing JSON information into a Javascript Array utilizing knockout

I have a JSON Array that includes various rules and values, but I want to convert it into a specific array format. Here is an example of the original JSON Array: AccessToFinancialServicesRule: {Clean: 3, Copy: 3} BoardParticipationRule: {Clean: 3, Copy: 3} ...

Dynamic header that adjusts to fit window size fluctuations

I'm currently working on a website and trying to make it responsive by adjusting to changes in the browser window size. I'm having trouble changing the header height based on the window size unlike how it works for my pictures in CSS: #l ...

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Recently, I have been exploring the YouTube Insight feature and I am intrigued by how their chart PNGs are generated. When you view the statistics for a video, the information is presented in interactive PNG images. These images seem to be entirely compos ...

`Issues with integrating AngularJS controller and service`

Here's the code snippet for a tiny Angular application I'm working on: var myApp = angular.module("MyApp", []); myApp.factory("Items", function() { var items = {}; items.query = function() { return [ { ...

Transmit information from the frontend to the backend using JavaScript and the Express framework

After creating a custom variable in my frontend to store data, I needed to access the same data in my Express backend. The JavaScript variable and the POST request code snippet are as follows: const dataPush = { urlSave: urlSave, ...

Leveraging AngularJS and ng-map to incorporate interactive dynamic heatmap displays

Greetings everyone! I am completely new to frontend development and have embarked on my first journey with AngularJS. I must admit, it's quite challenging and I'm still trying to wrap my head around how it all works. Currently, I'm working o ...

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...